从Webservice（asmx）加载数据到jqgrid。 请帮帮我

我创build一个样本来testingjqgrid。

GetDataService.asmx：

using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.Web.Script.Services; using System.Web.Script.Serialization; using System.Collections.Generic; using System.Data.SqlClient; namespace ExampleJqGrid { /// <summary> /// Summary description for GetDataService /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] [ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. // [System.Web.Script.Services.ScriptService] public class GetDataService : System.Web.Services.WebService { [WebMethod] public string GetProduct() { SqlConnection con = new SqlConnection(@"Data Source=NGUYEN-LAPTOP\SQLEXPRESS;Initial Catalog=ProductDB;Integrated Security=True"); //SqlCommand cmd = new SqlCommand("SELECT * FROM Products", con); SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM Products", con); DataSet ds = new DataSet(); da.Fill(ds); DataTable dt = ds.Tables[0]; GetJSONFromDataTable getJsonDataTable = new GetJSONFromDataTable(); string json = getJsonDataTable.GetJSONString(dt); string jonsData = GetJSONFromDataTable.JsonForJqgrid(dt, 10, 10, 2); return jonsData; } } } 

GetJSONFromDataTable.cs

 using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Text; using System.Web.Script.Serialization; namespace ExampleJqGrid { public class GetJSONFromDataTable {public static string JsonForJqgrid(DataTable dt, int pageSize, int totalRecords,int page) { int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize); StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("{"); jsonBuilder.Append("\"total\":" + totalPages + ",\"page\":" + page + ",\"records\":" + (totalRecords) + ",\"rows\""); jsonBuilder.Append(":["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{\"i\":"+ (i) +",\"cell\":["); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("\""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("\","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]},"); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]"); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } } } 

GetJSONFromDataTable.cs

 public static string JsonForJqgrid(DataTable dt, int pageSize, int totalRecords,int page) { int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize); StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("{"); jsonBuilder.Append("\"total\":" + totalPages + ",\"page\":" + page + ",\"records\":" + (totalRecords) + ",\"rows\""); jsonBuilder.Append(":["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{\"i\":"+ (i) +",\"cell\":["); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("\""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("\","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]},"); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]"); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } 

Default.asp的

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExampleJqGrid._Default" %> 

 <script type="text/javascript" src="Resources/js/i18n/grid.locale-en.js"></script> <script type="text/javascript" src="Resources/js/jquery.jqGrid.js"></script> <script type="text/javascript" src="Resources/js/ui.multiselect.js"></script> <script type="text/javascript" src="Resources/js/jquery.layout.js"></script> <script type="text/javascript" src="Resources/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="Resources/js/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript" src="Resources/js/jqDnR.js"></script> <script type="text/javascript" src="Resources/js/jqModal.js"></script> <link href="Resources/themes/ui.jqgrid.css" /> <link href="Resources/themes/redmond/jquery-ui-1.8.2.custom.css" /> <script type="text/javascript"> function getProducts() { $.ajax({ url: "/GetDataService.asmx/GetProduct", data:"{}", // For empty input data use "{}", dataType: "json", type: "'GET'", contentType: "application/json; charset=utf-8", //success: successFunction /*complete*/success: function(jsondata) { alert(jsondata); var thegrid = jQuery("#list")[0]; thegrid.addJSONData(JSON.parse(jsondata)); } }); } function dataBindToGrid() { jQuery("#list").jqGrid({ datatype: getProducts(), colNames: ['ProductId', 'ProductName', 'Description', 'Price'], colModel: [{ name: 'ProductId', index: 'ProductId', width: 200, align: 'left' }, { name: 'ProductName', index: 'ProductName', width: 200, align: 'left' }, { name: 'Description', index: 'Description', width: 200, align: 'left' }, { name: 'Price', index: 'Price', width: 200, align: 'left' } ], rowNum: 10, rowList: [5, 10, 20, 50, 100], pager: jQuery('#pager'), //imgpath: '<%= ResolveClientUrl("~/Resources/themes/redmond/images") %>', imgpath: '~/Resources/themes/redmond/images', width: 300, viewrecords: true }).navGrid(pager, { edit: true, add: false, del: false, search: false }); } jQuery(document).ready(function() { $("#btnAdd").click(dataBindToGrid); }); </script> 

  <table id="list" class="scroll"> </table> <div id="pager" class="scroll" style="text-align:center;"></div> <button id="btnAdd" >Load Data</button> <asp:TextBox ID="hidenfield" runat = "server" style="display:none"></asp:TextBox> </div> </form> 

当我提醒jsondatastring，它返回null。

请检查并帮助我加载数据到jqgrid

最好的祝福

Answer 1

你的例子有很多问题。 例如

• 如果在Web方法上使用[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]属性和Web服务类上的[ScriptService] ，则输出参数将自动转换为JSON 。 （请参阅asmx Web服务，例如json，javascript / jquery？ ）。 那么你将不需要实现像JsonForJqgrid这样的JsonForJqgrid 。
• 你的程序使用了很老的模板。 不再需要使用datatype作为JSON数据的函数。 在jqGrid中使用非常古老的jqGrid参数imgpath和class="scroll" ，因为许多版本的jqGrid都没有使用过，所以也使用了一个非常旧的模板。
• 像type: "'GET'"而不是type: 'GET'或type: "GET"小错误。

如果您将按照datatypefunction的使用方式进行操作，您将会遇到问题，如果您决定在应用程序中执行数据分页search。

我build议你最好看看一些其他的例子，如jqgrid页面x页面 ， jqgrid setGridParam数据types：本地或jQuery的ASP.NET MVC – 调用Ajax支持的Web服务 。 你也可以下载一个工作示例jqGrid/WebServicesPostToJqGrid.zip ，它是我作为http://www.trirand.com/blog/?page_id=393的一部分创build的/ help / pager-not-working-for-me-where-am -i-doing-wrong的答案或http://www.ok-soft-gmbh.com/jqGrid/VS2008jQueryMVC.zip或http：:// www。 ok-soft-gmbh.com/jqGrid/jQueryMVC.zip （请参阅另一个旧的答案jQuery与ASP.NET MVC – 调用Ajax支持的Web服务 ）

更新 ：你也有错误的JavaScript文件的顺序。 ui.multiselect.css并未全部加载。 你应该改变它

包括jqDnR.js和jqModal.js是不需要的。 它应该是jquery.jqGrid.js的一部分，如果您在jqGrid下载期间检查相应的模块。 jquery.layout.js不需要jquery.layout.js。 只有单独使用时才应该包含它。