JqG​​rid addJSONData + ASP.NET 2.0 WS

我有点迷茫。 我试图实现基于JqGrid的解决方案，并尝试使用函数作为数据类型。 我已经通过这本书设置了所有，我调用了WS并获得了JSON，我在ajax调用中的客户端获得了成功，并且我使用addJSONData “绑定” addJSONData但是网格仍为空。 我现在没有任何线索…同一页面上的其他“本地”样本没有问题（jsonstring …）

我的WS方法如下：

 [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string GetGridData() { // Load a list InitSessionVariables(); SA.DB.DenarnaEnota.DenarnaEnotaDB db = new SAOP.SA.DB.DenarnaEnota.DenarnaEnotaDB(); DataSet ds = db.GetLookupForDenarnaEnota(SAOP.FW.DB.RecordStatus.All); // Turn into HTML friendly format GetGridData summaryList = new GetGridData(); summaryList.page = "1"; summaryList.total = "10"; summaryList.records = "160"; int i = 0; foreach (DataRow dr in ds.Tables[0].Rows) { GridRows row = new GridRows(); row.id = dr["DenarnaEnotaID"].ToString(); row.cell = "[" + "\"" + dr["DenarnaEnotaID"].ToString() + "\"" + "," + "\"" + dr["Kratica"].ToString() + "\"" + "," + "\"" + dr["Naziv"].ToString() + "\"" + "," + "\"" + dr["Sifra"].ToString() + "\"" + "]"; summaryList.rows.Add(row); } return JsonConvert.SerializeObject(summaryList); } 

我的ASCX代码是这样的：

 jQuery(document).ready(function(){ jQuery("#list").jqGrid({ datatype : function (postdata) { jQuery.ajax({ url:'../../AjaxWS/TemeljnicaEdit.asmx/GetGridData', data:'{}', dataType:'json', type: 'POST', contentType: "application/json; charset=utf-8", complete: function(jsondata,stat){ if(stat=="success") { var clearJson = jsondata.responseText; var thegrid = jQuery("#list")[0]; var myjsongrid = eval('('+clearJson+')'); alfs thegrid.addJSONData(myjsongrid.replace(/\\/g,'')); } } } ); }, colNames:['DenarnaEnotaID','Kratica', 'Sifra', 'Naziv'], colModel:[ {name:'DenarnaEnotaID',index:'DenarnaEnotaID', width:100}, {name:'Kratica',index:'Kratica', width:100}, {name:'Sifra',index:'Sifra', width:100}, {name:'Naziv',index:'Naziv', width:100}], rowNum:15, rowList:[15,30,100], pager: jQuery('#pager'), sortname: 'id', // loadtext:"Nalagam zapise...", // viewrecords: true, sortorder: "desc", // caption:"Vrstice", // width:"800", imgpath: "../Scripts/JGrid/themes/basic/images"}); }); 

从WS我得到这样的JSON：

 {”page”:”1″,”total”:”10″,”records”:”160″,”rows”:[{"id":"18","cell":"["18","BAM","Konvertibilna marka","977"]“},{”id”:”19″,”cell”:”["19","RSD","Srbski dinar","941"]“},{”id”:”20″,”cell”:”["20","AFN","Afgani","971"]“},{”id”:”21″,”cell”:”["21","ALL","Lek","008"]“},{”id”:”22″,”cell”:”["22","DZD","Alžirski dinar","012"]“},{”id”:”23″,”cell”:”["23","AOA","Kvanza","973"]“},{”id”:”24″,”cell”:”["24","XCD","Vzhodnokaribski dolar","951"]“},{”id”:”25″,”cell”:” ……………… ["13","PLN","Poljski zlot","985"]“},{”id”:”14″,”cell”:”["14","SEK","Švedska krona","752"]“},{”id”:”15″,”cell”:”["15","SKK","Slovaška krona","703"]“},{”id”:”16″,”cell”:”["16","USD","Ameriški dolar","840"]“},{”id”:”17″,”cell”:”["17","XXX","Nobena valuta","000"]“},{”id”:”1″,”cell”:”["1","SIT","Slovenski tolar","705"]“}]} 

我已经注册了这个JavaScript：

 clientSideScripts.RegisterClientScriptFile("prototype.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/prototype-1.6.0.2.js")); clientSideScripts.RegisterClientScriptFile("jquery.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/jquery.js")); clientSideScripts.RegisterClientScriptFile("jquery.jqGrid.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/jquery.jqGrid.js")); clientSideScripts.RegisterClientScriptFile("jqModal.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/js/jqModal.js")); clientSideScripts.RegisterClientScriptFile("jqDnR.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/js/jqDnR.js")); 

基本上我觉得它一定是蠢事……但我现在想不出来……

Answer 1

在过去的几个小时里，我一直在努力解决同样的问题。 我现在已经放弃了让AddJSONData工作 – 我的Web服务方法正在返回一个数组，所以看起来使用addRowData会起作用。

 function ReceivedClientData(data) { var thegrid = $("#list4"); for (var i = 0; i < data.length; i++) { thegrid.addRowData(i+1, data[i]); } } 

Answer 2

jqGrid的设置看起来很好。

你确定你在jsondata.responseText得到的是你所描述的吗？

我在.NET中编写的Web服务返回格式如下：

 {"d": "{”page”:”1″,”total”:”10″,”records”:”160″,”rows”:[{"id":"18","cell":"["18","BAM","Konvertibilna marka","977"]“}" 

在我的function中，我必须这样做：

 complete: function(data) { var stuff = JSON.parse(data.responseText); jQuery("#grid")[0].addJSONData(JSON.parse(stuff.d)); } 

在实际获得我需要的数据之前，我必须将字符串转换为JSON两次。

如果你有很多问题。 我建议逐件调试。 执行一个简单的语句，例如：

 jQuery("#list")[0].addJSONData(JSON.parse("{total: 1, page: 1, records: 1, rows : [ {id: '1', cell:['1', '2007-10-01', 'test', 'note', 'new', '200.00', '10.00', '210.00']} ] }")); 

这应该至少起作用。 之后，只需分析从Web服务获得的输出，并确保您可以将该语句执行为“完成”。

Answer 3

实际上，关键似乎是addJSONData上没有出现在docs中的参数：

 function ReceivedClientData(data) { var thegrid = $("#rowed2"); thegrid[0].addJSONData(data,thegrid.bDiv,9) } 

与之相关的Web方法是：

  [WebMethod(EnableSession = true)] public object GetTestClients(int pagenum, int rows) { var lst = Session["lst"] as List; if (lst == null) { lst = new List(); for (int i = 1; i <= 5; i++) { lst.Add(new TF.WebApps.Entities.Client() { ClientID = "Client" + i, Firstname = "first" + i, Lastname = "last" + i }); } Session["lst"] = lst; } var v = from c in lst select new { id = c.ClientID, cell = new object[] { c.ClientID, c.Firstname, c.Lastname } }; var result = new { total = v.Count() / rows, page = pagenum, records = rows, rows = v.Skip((pagenum-1)*rows).Take(rows).ToArray() }; return result; } 

Answer 4

我也使用web服务将数据传递给jqGrid。 我遇到了同样的问题，这里是.ajax函数完整部分的代码。

 complete: function(jsondata, stat) { if (stat == "success") { var thegrid = jQuery("#list2")[0]; var jsonObject = eval('(' + jsondata.responseText + ')'); thegrid.addJSONData(jsonObject.d); } } 

在将responseText计算为JSON对象之后，键是.d 。

Answer 5

我知道它已经过时了，但这可能是你的问题……

使row.cell成为List，然后就可以了……

 row.cell = new List { dr["DenarnaEnotaID"] ,dr["Kratica"] ,dr["Naziv"] ,dr["Sifra"] }; 

在脚本方面……

 var myjsongrid = eval('('+clearJson+')'); ... thegrid.addJSONData(myjsongrid.replace(/\\/g,'')); 

此时myjsongrid是一个Object，对象上通常没有.replace方法。 此外，您应该使用eval的JSON解析器。 我自己使用Crockford的json2.js的修改版本，但YMMV。

这应该让每一行都是你想要的，让序列化器处理转换……我实际上将我的数据表序列化为{columns：[‘colname’，…]，rows：[[‘row1val’，…] ，[‘row2val’，…]，…]}并在客户端使用，因为我使用了一些相同的调用来填充各种网格…我有一个客户端selectForJqGrid（table，keycol，[ col list]）将其设置为直接用于jqGrid。

Answer 6

这对我有用：

 mygrid[0].addJSONData(result, mygrid.bDiv, 0); 

或试试这个：

 mygrid[0].addJSONData($.toJSON(result), mygrid.bDiv, 0); 

我的网格数据类型是jsonstring。

Answer 7

我对一些jqGrid建议的误导性感到非常惊讶。

有两种方法可以从服务中为jqGrid提供JSON数据。

您可以编写一个方法来返回jqGrid的一个“数据块”，只有足够的数据用于一页结果。

或者，您可以让自己轻松生活，一次性返回所有JSON数据，并获得jqGrid来处理分页，而无需进一步调用您的JSON服务。

它的关键是loadonce jqGrid设置：

 loadonce: true, 

例如，我有一个JSON Web服务，它返回特定客户ID的订单列表：

http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS

..我想创建这个jqGrid：

这是我的jqGrid声明的样子：

 $("#tblOrders").jqGrid({ url: 'http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS', contentType: "application/json", datatype: "json", jsonReader: { root: "GetOrdersForCustomerResult", id: "OrderID", repeatitems: false }, mtype: "GET", colNames: ["ID", "Date", "ShipName", "ShipAddress", "ShipCity", "ShippedDate"], colModel: [ { name: "OrderID", width: 80, align: "center" }, { name: "OrderDate", width: 90, align: "center" }, { name: "ShipName", width: 250 }, { name: "ShipAddress", width: 250 }, { name: "ShipCity", width: 95 }, { name: "ShippedDate", width: 95 }, ], pager: "#pager", height: 'auto', rowNum: 8, rowList: [8, 16, 24], loadonce: true, sortname: "OrderID", sortorder: "desc", viewrecords: true, gridview: true, autoencode: true, caption: "Northwind orders" }); 

注意以上三行：

  jsonReader: { root: "GetOrdersForCustomerResult", id: "OrderID", repeatitems: false }, 

这可以防止发生令人讨厌的“addJSONdata”exception，并告诉jqGrid实际上，我们的JSON数据数据存储在我的JSON结果的GetOrdersForCustomerResult部分中。

 { GetOrdersForCustomerResult: [ { OrderDate: "8/12/1996", OrderID: 10278, ShipAddress: "Berguvsvägen 8", ShipCity: "Luleå", ShipName: "Berglunds snabbköp", ShipPostcode: "S-958 22", ShippedDate: "8/16/1996" }, { OrderDate: "8/14/1996", OrderID: 10280, ...etc... 

就是这样。 根本不需要调用AddJSONdata。

可以在我的博客上找到此示例的完整演练：

http://mikesknowledgebase.com/pages/Services/WebServices-Page10.htm

（我希望我在三小时前阅读这篇文章，当时我开始研究这些问题！）

Answer 8

您的问题是您应该将addJSONData与responseText一起使用。 eval它，然后在JavaScript中将JSON字符串解析为JSON。 这应该可以解决问题。

对于Frenchie的回答，我仍然会添加一些提示：

 complete: function(jsondata, stat) { if (stat == "success") { var jsonObject = (eval("(" + jsondata.responseText + ")")); $('#list2')[0].addJSONData(JSON.parse(jsonObject.d)); } } 

这就是你的JSON。 并且应该使用JsonReader正确配置JsonReader以便在加载数据时不会出现错误，例如：提供您拥有的任何索引。 这应该可以解决您的问题。

 jsonReader: { root: "rows", //arry containing actual data page: "page", //current page total: "total", //total pages for the query records: "records", //total number of records repeatitems: false, id: "DenarnaEnotaID" //index of the column with the PK in it },