排序不使用jqGrid

Question

我一直遇到让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年底开始开发.它有许多新功能.在当前数据页面将显示在jqGrid中之前,可以使用该选项forceClientSorting: true强制在客户端上对数据进行排序和过滤.因此,可以添加选项并删除技巧,如旧答案中所述.forceClientSorting: true