我尝试修改此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;
}
答案 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演示项目。