4

我在让 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 } );
4

3 回答 3

9

如果您从服务器加载未排序的数据，并且一旦您不应该放置jQuery("#grid").trigger("reloadGrid");在loadComplete. 每次对本地数据进行排序或分页时loadComplete都会调用回调。此外，最好调用inside of 。在这种情况下，网格的第一次完整加载将在重新加载之前完成。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

于 2012-04-23T19:56:27.133 回答
1

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

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'}); 
    }
于 2012-04-23T19:20:20.640 回答
0

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

尝试这样的事情：

datatype : function (){
    $.ajax({
    …
    complete :function (…){
                …
                $("#mygrid").setGridParam({datatype:'local'});
        }
    })
},
于 2013-05-20T17:49:10.347 回答