排序不适用于 jqGrid [英] Sort not working with jqGrid

问题描述

我在让 jqGrid 进行排序时遇到了问题.我希望在客户端上进行这种排序，但我也愿意对数据库进行新的调用以获取排序结果.

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.

我可以点击列标题，排序箭头改变方向，但是数据根本没有改变.

I can click on the column headers and the sort arrows change directions, however the data does not change at all.

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

I've looked over this question, however calling reloadGrid didn't seem to help.

我的整个网格如下:

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 } );

推荐答案

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

If you load unsorted data from the server and want just sort local data once you should not place jQuery("#grid").trigger("reloadGrid"); inside of loadComplete. The callback loadComplete will be called on every sorting 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.

我没有测试过，但是我想loadComplete的正确代码大概如下

I don't tested, but I suppose the correct code of loadComplete could be about the following

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'.

In the case the reloadGrid will be called only once at the first load of the grid from the server. At the next call the value of datatype option will be already 'local'.

更新: Free jqGrid 是 jqGrid 的分支，它我从 2014 年底开始开发.它有许多新功能.可以使用选项forceClientSorting: true 强制在客户端对数据进行排序和过滤在当前页面的数据将显示在jqGrid 中.因此，只需添加 forceClientSorting: true 选项并删除旧答案中描述的技巧.

UPDATED: Free jqGrid is the fork of jqGrid, which I develop starting with the end 2014. It has many new features. One can use the option forceClientSorting: true to force sorting and filtering of data on the client side before the current page of data will be displayed in jqGrid. Thus one can just add forceClientSorting: true option and remove the trick, described in the old answer.

这篇关于排序不适用于 jqGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！