2012-04-23 180 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