在回顾了这两个问题和Oleg的大答案之后
我正在尝试使用来自服务器的json数据自动完成jQgrid工具栏搜索来实现此功能。
我的代码:
myGrid.jqGrid({
url: './WebService.asmx/ViewNQueryData',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
colModel: columnModel,
colNames: columnNames,
rowNum: 10,
rowList: [10, 20, 300],
sortname: 'ID',
sortorder: "asc",
sortable: true,
pager: "#ViewNQueryPager",
viewrecords: true,
gridview: true,
height: 250,
shrinkToFit: true,//If using frozen coulmns change to false.
grouping: true,
groupingView: {
groupField: ['ID'],
//groupColumnShow: [false],
//groupText: ['<b>{0} - {1} Item(s)</b>'],
groupSummary: [true],
groupOrder: ['asc'],
groupDataSorted: true,
showSummaryOnHide: true
},
footerrow: true,
userDataOnFooter: true,
gridComplete: function () {
$('#totalRecordsFound').html(myGrid.jqGrid('getGridParam', 'records') + " Customers");
},
loadError: function () {
alert("Error fetching data");
}
}).jqGrid('navGrid', '#ViewNQueryPager',
{ edit: false, add: false, del: false, search: true, view: true }, //option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{multipleSearch: true, multipleGroup: true, showQuery: true, onSearch: function (response) { showQueryDetails(); } },
{ height: 250, jqModal: false, closeOnEscape: true} // view options
);
myGrid.jqGrid('setColProp', 'FirstName',
{
searchoptions: {
sopt: ['cn'],
dataInit: function (elem) {
$(elem).autocomplete({
source: './WebService.asmx/ViewNQueryData',
minLength: 1
});
}
}
});
myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });
但是当我输入搜索框时,请求没有到达我的webService,我在浏览器中遇到异常,他正试图这样做:
http://localhost:50949/WebService.asmx/ViewNQueryData?term=p
但是:
无法加载资源:服务器响应状态为500(内部服务器错误)
我的网络服务:
public JqGridData ViewNQueryData(int page, int rows, string sidx, string sord, bool _search, string filters)
{
if (_search && !String.IsNullOrEmpty(filters))
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
jqGridSearchFilter searchFilter =
serializer.Deserialize<jqGridSearchFilter>(filters);
// use the searchFilter here
}
List<Person> allGridRows = JsonHelper.GetPersons();
int recordsCount = allGridRows.Count;
int startIndex = (page - 1) * rows;
int endIndex = (startIndex + rows < recordsCount) ?
startIndex + rows : recordsCount;
List<TableRow> gridRowsForResponse = new List<TableRow>(rows);
for (int i = startIndex; i < endIndex; i++)
{
gridRowsForResponse.Add(new TableRow()
{
id = i,
cell = new List<string>(3) {
allGridRows[i].ID.ToString(),
allGridRows[i].FirstName,
allGridRows[i].LastName
}
});
}
return new JqGridData()
{
total = (recordsCount + rows - 1) / rows,
page = page,
records = recordsCount,
rows = gridRowsForResponse
};
}
我做错了什么?遗漏了什么? 我还需要从服务器返回什么?网格需要的常规JSON?
答案 0 :(得分:1)
错误是您对jQuery UI自动填充和主网格'./WebService.asmx/ViewNQueryData'
使用相同的网址url
。
主网格url
应调用包含(int page, int rows, string sidx, string sord, bool _search, string filters)
参数的Web方法,并以
{
"d": {
"__type": "JqGridData",
"total": 3,
"page": 1,
"records": 24,
"rows": [
{"id": 10, "cell": ["1", "Prabir", "Shrestha"]},
{"id": 20, "cell": ["2", "Scott", "Gu"]},
{"id": 43, "cell": ["4", "Bill", "Gates"]}
]
}
}
另一方面,jQuery UI自动完成的Web方法应该只有一个输入参数term
,并以
["Bill", "Scott"]
或
[
{
"label": "Crab-Plover",
"value": "Crab-Plover"
},
{
"id": "Oenanthe isabellina",
"label": "Isabelline Wheatear",
"value": "Isabelline Wheatear"
}
]
请参阅jQuery UI Autocomplete documentation的“Datamodel”部分。
因为您使用ASMX Web服务将返回的JSON数据包装在d
属性({d:{...}}
)中,所以您必须使用一些其他修改来以支持的格式之一提供jQuery UI自动完成的数据。例如,您可以在回调表单中使用自动填充的source
参数,而不是简单的URL字符串。例如,请参阅the answer(或this one)。