javascript 排序不适用于 jqGrid
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10286779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sort not working with jqGrid
提问by Mike Christensen
I've been having problems getting jqGrid to sort. I'd like to preferable do this sorting on the client, but I'm also willing to make a new call to the database to get the sorted results as well.
我在让 jqGrid 排序时遇到了问题。我更喜欢在客户端上进行这种排序，但我也愿意对数据库进行新调用以获取排序结果。
I can click on the column headers and the sort arrows change directions, however the data does not change at all.
我可以点击列标题，排序箭头会改变方向，但数据根本不会改变。
I've looked over this question, however calling reloadGrid didn't seem to help.
我已经查看了这个问题，但是调用 reloadGrid 似乎没有帮助。
My entire grid is as follows:
我的整个网格如下：
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 } );
回答by Oleg
If you load unsorted data from the server and want just sort local data onceyou should not place jQuery("#grid").trigger("reloadGrid");inside of loadComplete. The callback loadCompletewill be called on everysorting or paging of local data too. Moreover it would be better to call jQuery("#grid").trigger("reloadGrid");inside of setTimeout. In the case the full first loading of the grid will be finished before reloading.
如果从服务器加载未排序的数据，并希望只是有些地方的数据，一旦你不应该发生jQuery("#grid").trigger("reloadGrid");的内部loadComplete。每次对本地数据进行排序或分页时loadComplete都会调用回调。此外，最好在. 在这种情况下，网格的首次加载将在重新加载之前完成。jQuery("#grid").trigger("reloadGrid");setTimeout
I don't tested, but I suppose the correct code of loadCompletecould be about the following
我没有测试，但我想正确的代码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);
}
}
}
In the case the reloadGridwill be called only once at the first load of the grid from the server. At the next call the value of datatypeoption will be already 'local'.
在这种情况下，reloadGrid将仅在服务器第一次加载网格时调用一次。在下一次调用时，datatypeoption的值将是'local'。
UPDATED:Free jqGridis the fork of jqGrid, which I develop starting with the end 2014. It has many new features. One can use the option forceClientSorting: trueto force sorting and filtering of data on the client side beforethe current page of data will be displayed in jqGrid. Thus one can just add forceClientSorting: trueoption and remove the trick, described in the old answer.
更新：免费 jqGrid是jqGrid的分支，我从 2014 年底开始开发。它有许多新功能。可以使用该选项forceClientSorting: true强制在客户端对数据进行排序和过滤，然后才会在 jqGrid 中显示当前页面的数据。因此，您可以添加forceClientSorting: true选项并删除旧答案中描述的技巧。
回答by Mike Christensen
Found one solution, though not entirely sure why this works. Perhaps someone can provide a better answer.
找到了一个解决方案，虽然不完全确定为什么会这样。也许有人可以提供更好的答案。
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'});
}
回答by Alfredo Papirriqui
loadonceonly works with the predefined loaders. If you use datatype as function you should set datatype:localmanually after the first loading of the grid with the custom function.
loadonce仅适用于预定义的加载程序。如果您使用数据类型作为函数，您应该datatype:local在第一次使用自定义函数加载网格后手动设置。
Try something like this:
尝试这样的事情：
datatype : function (){
$.ajax({
…
complete :function (…){
…
$("#mygrid").setGridParam({datatype:'local'});
}
})
},
