jqGrid加载WebMethod数据

时间:2014-09-29 21:54:41

标签: jqgrid

我尝试修改此example以使用url属性调用web方法。
如何让构造函数调用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;
}

1 个答案:

答案 0 :(得分:1)

如果没有实现服务器端数据分页,则应返回所有数据。最简单的格式是项目数组。因此,您可以将WebMethod Test2的代码修改为以下内容:

[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",如果您不使用任何其他属性,请使用mtype: "POST" WebMethod。

最后一件重要的事情如下: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演示项目。