2012-04-23 140 views
3

我一直有问题让jqGrid排序。我希望在客户端进行这种排序,但我也愿意对数据库进行新的调用以获得排序结果。排序不能和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 }); 
+0

http://www.trirand.com/blog/?page_id=393/help/loading-json-data-techniques-and-sorting-issue/ – 2012-04-23 19:45:09

回答

7

如果从服务器加载未排序的数据,并希望只是有些地方数据一旦您不应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是jqGrid的分支,我从2014年底开始开发。它有许多新功能。可以使用选项forceClientSorting: true强制排序和过滤客户端之前的数据当前页面的数据将显示在jqGrid中。因此,人们可以添加forceClientSorting: true选项并删除旧的答案中描述的技巧。

+0

谢谢!这是有道理的。我最终只是在服务器上进行分类并绑定新的数据,这是微不足道的,对我的目的很有效。 – 2012-04-23 20:35:30

+0

@MikeChristensen:不客气!服务器上的几乎任何类型的实现都将很快在JavaScript中进行排序。所以在服务器上排序是最好的方法。 – Oleg 2012-04-23 20:41:45

+0

我同意,特别是因为我不得不做的一些排序涉及多个键;所以我不得不弄清楚如何为jqGrid编写自定义比较函数 - 我相信这是可能的,但我现在决定走更简单的路线。 – 2012-04-23 21:31:46

0

找到一个解决方案,但不能完全肯定为什么这个工程。也许有人可以提供更好的答案。

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

loadonce只适用于预定义的加载程序。如果使用数据类型作为函数,则应在首次使用自定义函数加载网格后手动设置datatype:local

尝试这样:

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

你应该改进它,因为它可能是有用的,但迄今为止还没有。 – aimbire 2013-05-20 18:14:01