jqGrid 加载 WebMethod 数据答案

【问题标题】：jqGrid load WebMethod datajqGrid 加载 WebMethod 数据
【发布时间】：2014-09-29 21:54:41
【问题描述】：

我正在尝试修改此 example 以调用具有 url 属性的网络方法。
如何让构造函数调用 WebMethod“Test2”？

<script type="text/javascript">
    //<![CDATA[
     $(function () {
         "use strict";
         var myFloatTemplate = { width: 80, align: "right", sorttype: "float" };

         $("#CompTable").jqGrid({
             url: "<%= AdminPath %>WebMethods/WebService1.asmx/Test2",
             datatype: "json",
             height: "auto",
             colNames: ["Part", "Description", "Src", "Std Usage", "Usage Inc Scrap", "Rate Scrap", "UOM", "Item", "Unit Cost", "Stock"],
             colModel: [
                    { name: "COMP1_PART", width: 120 },
                    { name: "WSCOMPDESC", width: 300 },
                    { name: "WSCOMPSRC", width: 40 },
                    { name: "COMPUSAGE", template: myFloatTemplate },
                    { name: "WSGROSSQTY", width: 120, template: myFloatTemplate },
                    { name: "COMPRATE_SCRAP", width: 90, template: myFloatTemplate },
                    { name: "COMPBASIC_UNIT", width: 60 },
                    { name: "COMP1_ITEM", width: 60 },
                    { name: "WSCOMPUNITCOST", template: myFloatTemplate },
                    { name: "WSCOMPQTYSTOCK", template: myFloatTemplate }
                ],
             jsonReader: {
                 repeatitems: false,
                 id: "ID"
             },
             caption: "Bom Detail",
             rowNum: 10000,
             autoencode: true,
             loadonce: true,
             sortable: true,
             loadComplete: function () {
                 var $self = $(this);
                 if ($self.jqGrid("getGridParam", "datatype") === "json") {
                     setTimeout(function () {
                         $(this).trigger("reloadGrid"); // Call to fix client-side sorting
                     }, 50);
                 }
             }
         });
     });
    //]]>
    </script>

和

[DataContract]
public class JJ
{
    [DataMember]
    public int ID;
      [DataMember]
    public string WSCOMPDESC;
      [DataMember]
    public string WSCOMPUNITCOST;
      [DataMember]
      public string WSCOMPSRC;
      [DataMember]
    public int WSCOMPQTYSTOCK;
      [DataMember]
    public string COMPBASIC_UNIT;
      [DataMember]
    public float COMPUSAGE;
      [DataMember]
    public int COMPRATE_SCRAP;
      [DataMember]
    public float  WSGROSSQTY;
      [DataMember]
    public string COMP1_PART;
      [DataMember]
    public string COMP1_ITEM;


}
[DataContract]
public class MM
{
    [DataMember]
    public int total;
    [DataMember]

    public int page;
    [DataMember]
    public int records;
    [DataMember]
    public List<JJ> rows;
}


[WebMethod]
public MM Test2()
{
    MM m = new MM();
    m.records = 2;
    m.page = 1;
    m.total = 1;

    m.rows = new List<JJ>();

    m.rows.Add(new JJ() { COMP1_ITEM = "1", WSCOMPDESC = "A"}); 
    m.rows.Add(new JJ() { COMP1_ITEM = "2", WSCOMPDESC = "B"});

    return m;
}

【问题讨论】：

标签： jqgrid

【解决方案1】：

如果您没有实现数据的服务器端分页，您应该返回所有数据。最简单的格式将是项目数组。所以可以将WebMethodTest2的代码修改为如下：

[WebMethod]
public object Test2 () {
    return new[] {
        new { COMP1_ITEM = "1", WSCOMPDESC = "A"},
        new { COMP1_ITEM = "2", WSCOMPDESC = "B"}
    };
}

那么你应该使用 jqGrid 的ajaxGridOptions 选项将contentType 设置为"application/json;" 或"application/json; charset=utf-8"，如果你不使用WebMethod 的任何其他属性，则使用mtype: "POST"。

最后重要的是：ASMX 将返回的结果包装到d 属性。所以返回的数据看起来像

{"d":[{"COMP1_ITEM":"1","WSCOMPDESC":"A"},{"COMP1_ITEM":"2","WSCOMPDESC":"B"}]}

而不是

[{"COMP1_ITEM":"1","WSCOMPDESC":"A"},{"COMP1_ITEM":"2","WSCOMPDESC":"B"}]

所以应该使用jsonReader: { repeatitems: false, root: "d" } 来读取数据。最后一点：您可以使用postData: "" 删除 jqGrid 发送的所有不需要的参数。

参见here 演示项目。

【讨论】：