jqGrid:POST数据到服务器以获取行数据(过滤和搜索)
我有一个这样的表格:
和我的jqGrid表:
我需要POST(不是GET) myForm
的数据到我的服务器方法,以获取行数据并填充网格。 到目前为止,我还没有能够让jqGrid发布任何东西。 我仔细检查了我的数据序列化,并正确地序列化我的表单数据。 这是我的jqGrid代码:
$("#myGrid").jqGrid({ url: '/Products/Search") %>', postData: $("#myForm").serialize(), datatype: "json", mtype: 'POST', colNames: ['Product Name', 'Price', 'Weight'], colModel: [ { name: 'ProductName', index: 'ProductName', width: 100, align: 'left' }, { name: 'Price', index: 'Price', width: 50, align: 'left' }, { name: 'Weight', index: 'Weight', width: 50, align: 'left' } ], rowNum: 20, rowList: [10, 20, 30], imgpath: gridimgpath, height: 'auto', width: '700', //pager: $('#pager'), sortname: 'ProductName', viewrecords: true, sortorder: "desc", caption: "Products", ajaxGridOptions: { contentType: "application/json" }, headertitles: true, sortable: true, jsonReader: { repeatitems: false, root: function(obj) { return obj.Items; }, page: function(obj) { return obj.CurrentPage; }, total: function(obj) { return obj.TotalPages; }, records: function(obj) { return obj.ItemCount; }, id: "ProductId" } });
你能看出我做错了什么或应该做些什么?
您的主要错误是在表单中使用postData
参数:
postData: $("#myForm").serialize()
这种用法有两个问题:
- 值
$("#myForm").serialize()
覆盖POST请求的所有参数,而不是添加其他参数。 - 值
$("#myForm").serialize()
将在网格初始化时间内仅计算一次 。 因此,您将始终将search=""
和maxPrice=""
发送到服务器。
我建议你用命名的编辑字段替换表单
使用方法将postData
参数定义为对象:
postData: { search: function() { return $("#search").val(); }, maxPrice: function() { return $("#maxPrice").val(); }, },
并将onclick
事件处理程序添加到“搜索”按钮(参见上面的HTML片段)
$("#startSearch").click(function() { $("#myGrid").trigger("reloadGrid"); });
此外,您没有写任何关于您使用的服务器技术。 可以进行一些额外的修改,以便能够在服务器端读取参数(例如serializeRowData: function (data) {return JSON.stringify(data);}
请参阅此内容 )。 我建议您还阅读另一个旧答案: 如何使用内置的搜索/filter框过滤jqGrid数据 。
其他一些小错误,如'/Products/Search") %>'
而不是’/ Products / Search’或使用不推荐的参数imgpath
(参见文档 )都不太重要。默认列选项如align: 'left'
应该是更好地删除。
还要考虑在网格中使用搜索。 例如, 提前搜索
$("#myGrid").jqGrid('navGrid','#pager', {add:false,edit:false,del:false,search:true,refresh:true}, {},{},{},{multipleSearch:true});
还有工具栏搜索 :
$("#myGrid").jqGrid('filterToolbar', {stringResult:true,searchOnEnter:true,defaultSearch:"cn"});
它可能会取代您使用的搜索表单。