排序不适用于 jqGrid答案

【问题标题】：Sort not working with jqGrid排序不适用于 jqGrid
【发布时间】：2012-04-23 19:14:49
【问题描述】：

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

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

我查看了 this question，但调用 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 } );

【问题讨论】：

trirand.com/blog/?page_id=393/help/…

标签： javascript jquery jqgrid

【解决方案1】：

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

我没有测试，但我想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'。

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

【讨论】：

谢谢！这是有道理的。我最终只是在服务器上进行了排序并绑定了新数据，这很简单，而且很适合我的目的。
@MikeChristensen：不客气！服务器上几乎任何类型的实现都将像 JavaScript 中的排序一样快速。所以在服务器上排序是最好的办法。
我同意，特别是因为我必须做的一些排序涉及多个键；所以我必须弄清楚如何为 jqGrid 编写自定义比较函数 - 我确信这是可能的，但我决定现在走更简单的路线。
不应该是$this.jqGrid('getGridParam', 'sortname') == '' 你实际上检查的是不等于。
@Reddy: 没有。应该检查sortname参数的值是否不是空字符串。所以应该使用===（或!==）和""或''。当前代码代码触发reloadGrid只有当加载的数据需要排序，所以只有sortname参数不是空字符串。

【解决方案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'}); 
    }

【讨论】：

【解决方案3】：

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

试试这样的：

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

【讨论】：

你应该改进它，因为它可能会有所帮助，但到目前为止还没有。