排序不使用jqGrid

我一直遇到让jqGrid排序的问题。 我希望最好在客户端上进行这种排序，但我也愿意对数据库进行新的调用以获得排序结果。

我可以单击列标题，排序箭头更改方向，但数据根本不会更改。

我已经查看了这个问题 ，但是调用reloadGrid似乎没有帮助。

我的整个网格如下：

var x = $("#grid").jqGrid({ jsonReader: { root: "rows", repeatitems: false }, datatype: "json", height: 'auto', autowidth: true, forceFit: true, colNames:['ID','Name'], colModel:[ {name:'id', key:true, index:'id', width:60, sorttype:"int", jsonmap:"id"}, {name:'name', index:'name', width:90, jsonmap: "name"} ], caption: "Results", loadonce: true, sortable: true, loadComplete: function() { jQuery("#grid").trigger("reloadGrid"); // Call to fix client-side sorting } }); //This data comes from a web service call, hard coding in to test var jsonData = [ {id: 1, name: 'Apple'}, {id: 2, name: 'Banana'}, {id: 3, name: 'Pear'}, {id: 4, name: 'Orange'} ]; x[0].addJSONData( { rows: jsonData } ); 

Answer 1

如果从服务器加载未排序的数据，并且只想放置本地数据，则不应放置jQuery("#grid").trigger("reloadGrid"); 在loadComplete里面。 每次对本地数据进行排序或分页时，都会调用回调loadComplete 。 此外，最好调用jQuery("#grid").trigger("reloadGrid"); 在setTimeout里面。 在重新加载之前完成第一次加载网格的情况。

我没有测试过，但我认为loadComplete的正确代码可以是以下内容

 loadComplete: function () { var $this = $(this); if ($this.jqGrid('getGridParam', 'datatype') === 'json') { if ($this.jqGrid('getGridParam', 'sortname') !== '') { // we need reload grid only if we use sortname parameter, // but the server return unsorted data setTimeout(function () { $this.triggerHandler('reloadGrid'); }, 50); } } } 

如果在从服务器第一次加载网格时只调用reloadGrid一次。 在下次调用时， datatype选项的值将已经是'local' 。

更新： 免费jqGrid是jqGrid的分支，我从2014年底开始开发。它有许多新function。 可以使用选项forceClientSorting: true强制在客户端强制排序和过滤数据， 然后在jqGrid中显示当前数据页面。 因此，可以添加forceClientSorting: true选项并删除旧答案中描述的技巧。

Answer 2

找到一个解决方案，虽然不完全确定为什么这样做。 也许有人可以提供更好的答案。

 var x = $("#grid").jqGrid({ jsonReader: { root: "rows", repeatitems: false }, datatype: "json", height: 'auto', autowidth: true, forceFit: true, colNames:['ID','Name'], colModel:[ {name:'id', key:true, index:'id', width:60, sorttype:"int", jsonmap:"id"}, {name:'name', index:'name', width:90, jsonmap: "name"} ], caption: "Results", //Required for client side sorting loadonce: true, gridComplete: function(){ $("#grid").setGridParam({datatype: 'local'}); } 

Answer 3

loadonce仅适用于预定义的加载器。 如果使用数据类型作为函数，则应在首次使用自定义函数加载网格后手动设置datatype:local 。

尝试这样的事情：

 datatype : function (){ $.ajax({ … complete :function (…){ … $("#mygrid").setGridParam({datatype:'local'}); } }) },