JqGrid addJSONData + ASP.NET 2.0 WS

Question

我有点失落。我试图实现一个基于JqGrid的解决方案，并尝试使用函数作为数据类型。我已经设置了所有的书，我猜，我调用了WS并获得了JSON，我在ajax调用中在客户端获得了成功，并使用addJSONData“绑定”了jqGrid，但网格保持空白。我没有任何线索，现在也...在同一个页面等“本地”作品样本没有问题（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

其实，关键似乎不显示在文档上addJSONData参数：

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

以该进该网站的方法是：

[WebMethod(EnableSession = true)] 
    public object GetTestClients(int pagenum, int rows) 
    { 
     var lst = Session["lst"] as List<Entities.Client>; 
     if (lst == null) 
     { 
      lst = new List<Entities.Client>(); 
      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 3

jqGrid的设置看起来很好。

你确定你回来的jsondata.responseText是你描述的吗？

我在.NET编写web服务返回JSON格式是这样的：

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

在我的职责，我不得不这样做：

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

我不得不把字符串转换成JSON 2几次才得到我需要的数据。

如果你有很大的问题。我建议一块一块地调试。执行如下简单语句：

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 4

这个工作对我来说：

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

或者试试这个：

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

我的网格数据类型jsonstring。

Answer 5

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

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

的关键是.D的responseText的被评估成JSON对象之后。

Answer 6

我知道这是老了，但是这可能是您的问题...

制作row.cell一个列表，那么你可以做...

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

在剧本方面...

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

myjsongrid是一个对象，在这一点上，对象通常没有.replace方法。另外，你应该使用一个嵌入eval的JSON解析器。我自己使用了Crockford的json2.js的修改版本，但使用了YMMV。我们实际上将我的数据表序列化为{columns：['colname'，...]，rows：[['row1val'， ...]，['row2val'，...]，...]}和frob它的客户端，因为我使用一些相同的调用填充各种网格...我有一个客户端selectForJqGrid（表，keycol，[col list]），它会将其设置为直接用于jqGrid。

Answer 7

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

要Frenchie的答案，我还是会增加一些提示吧：

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

所以这是你的JSON。 JqG​​rid应该正确地配置为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 
     }, 

Answer 8

我很惊讶于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” 异常，并告诉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

（我希望我能有这个文章读，三小时前，当我开始寻找到这些问题！ ！）