jqGrid的 - 工具栏搜索与自动从服务器的完整 - 使用JSON [英] jqGrid - Toolbar search with auto complete from server - using json
问题描述
审查这些2个问题和Oleg伟大的答案后，
After reviewing these 2 questions and Oleg great answers
<一个href=\"http://stackoverflow.com/questions/5328072/can-jqgrid-support-dropdowns-in-the-toolbar-filter-fields/5329014#5329014\">can在工具栏过滤器领域的jqGrid支持下拉菜单
<一个href=\"http://stackoverflow.com/questions/6037104/jqgrid-toolbar-search-with-autocomplete-using-json-data\">jqGrid使用自动完成JSON数据的工具栏搜索
我想实现用JSON数据来形式传递到服务器的jqGrid工具栏的搜索自动完成此功能。
I am trying to implement this feature with autocomplete of jQgrid toolbar search with json data coming form the server.
我的code：
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 });
但是，当我在搜索框中键入犯规得到我的web服务的请求，我得到的异常在浏览器中，他正试图以这样的：
But when i type in the search box the request doesnt get to my webService, and i get on exception in the browser, that he is trying to to this:
http://localhost:50949/WebService.asmx/ViewNQueryData?term=p
但：结果
无法加载资源：服务器与500（内部服务器错误）的状态
but :
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
我的Web服务：
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？
What am i doing wrong? missing something? Also what do i need to return from the server? the regular JSON that the grid needs?
推荐答案
该错误是你使用相同的URL './ WebService.asmx / ViewNQueryData 为jQuery UI的自动完成和主网网址。
The error is that you use the same URL './WebService.asmx/ViewNQueryData' for both jQuery UI Autocomplete and the the main grid url.
主网架网址应该调用其Web方法（INT页，诠释行，串SIDX，串SORD，布尔_search，字符串过滤器） 参数和格式返回JSON数据
The main grid url should call web method having (int page, int rows, string sidx, string sord, bool _search, string filters) parameters and return the JSON data in the format
{
"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用户界面自动完成Web方法应该只有一个输入参数词，并在格式返回后面的数据，如
On the other side the web method for the jQuery UI Autocomplete should has only one input parameter term and return back the data in the format like
["Bill", "Scott"]
或
[
{
"label": "Crab-Plover",
"value": "Crab-Plover"
},
{
"id": "Oenanthe isabellina",
"label": "Isabelline Wheatear",
"value": "Isabelline Wheatear"
}
]
查看jQuery UI的自动完成文档的数据模型的一部分。
See "Datamodel" part of the jQuery UI Autocomplete documentation.
由于您使用ASMX的Web服务，包裹在 D 属性（返回的JSON数据{D：{...}} ），你必须使用一些额外的修改，以提供支持的格式之一jQuery用户界面自动完成的数据。例如，你可以使用自动完成的源参数回调形式而不是简单的URL字符串。请参见答案（或this 之一）为例。
Because you use ASMX web services which wrap the returned JSON data in d property ({d:{...}}) you have to use some additional modifications to provide the data for jQuery UI Autocomplete in one of supported format. For example you can use source parameter of Autocomplete in callback form instead of the simple URL string. See the answer (or this one) for example.
这篇关于jqGrid的 - 工具栏搜索与自动从服务器的完整 - 使用JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
