jqGrid和搜索filter。 重新填充数据的最佳方式

我已经玩了很长时间的jqGrid，但从未深入了解性能细节。
我没有使用内置的jqGrid搜索表单，因为我更喜欢拥有自己的工具栏，用户输入他/她想要过滤的一些数据。

我总是把我的网格包裹在一个函数中：

$(document).ready(function () { var myGrid = jQuery("#MyGrid"); $("#cmdSearch").bind('click', function (e) { myGrid.GridUnload(); LoadMyGrid($("#Filter1").val(), $("#Filter2").val()) }); function LoadMyGrid(param1, param2) { myGrid.jqGrid({ url: 'myUrl', postData: { Param1: param1, Param2: param2 }, datatype: 'json', mtype: 'POST', colNames: ['Column1', 'Column2'], colModel: [ { name: 'colum1', index: 'colum1', sortable: true, width: 100 }, { name: 'colum2', index: 'colum2', sortable: true, width: 100 } ], pager: $('#MyPager'), rowList: [10, 50, 100], rowNum: 10, viewrecords: false, shrinkToFit: false, rownumbers: true, hidegrid: false, emptyrecords: "No records." }); } }); 

并在重新创建之前卸载它（ GridUnload ）。 我想知道这是否是最好的方法，或者可能存在一些性能/内存问题？

Answer 1

在示例中使用GridUnload()不是最好的方法。 我会把你的代码重写如下

 $(document).ready(function () { var myGrid = jQuery("#MyGrid"); myGrid.jqGrid({ url: 'myUrl', postData: { Param1: function() { return $("#Filter1").val(); }, Param2: function() { return $("#Filter2").val(); } }, datatype: 'json', mtype: 'POST', colNames: ['Column1', 'Column2'], colModel: [ { name: 'colum1', index: 'colum1', sortable: true, width: 100 }, { name: 'colum2', index: 'colum2', sortable: true, width: 100 } ], pager: '#MyPager', rowList: [10, 50, 100], rowNum: 10, viewrecords: false, shrinkToFit: false, rownumbers: true, hidegrid: false, emptyrecords: "No records." }); $("#cmdSearch").click(function() { myGrid.trigger('reloadGrid',[{page:1}]); }); }); 

在代码中我使用了使用函数的想法作为postData的属性，我在这里描述。 可以减少myGrid.trigger('reloadGrid');的’click’句柄myGrid.trigger('reloadGrid'); 。 在所有网格重新加载的情况下（例如在排序或分页时）将使用来自$("#Filter1")和$("#Filter2")控件的当前值。 网格本身不会被破坏和重新创建。 而不是只重新加载网格数据。 关于reloadGrid不同附加参数，请参见此处 。

从pager: $('#MyPager')小变化pager: $('#MyPager')到pager: '#MyPager' pager: $('#MyPager') pager: '#MyPager'我想要一点评论。 如果你看一下你会发现的jqGrid源代码

 if(typeof ts.p.pager == "string") {if(ts.p.pager.substr(0,1) !="#") { ts.p.pager = "#"+ts.p.pager;} } else { ts.p.pager = "#"+ $(ts.p.pager).attr("id");} 

因此，如果您使用$('#MyPager')forms的pager参数，则将“规范化”为’#MyPager’。 在我读完之后，我只使用了pager: '#MyPager'语法。