2014-01-23 24 views
3

我有一個jqgrid與分組,但是從服務器返回的數據已經分組了,我只是想將jqgrid分組看看數據。我已經包含了一個jsfiddle,因爲一張圖片可以說出1000個單詞。該數據包括在FIDDLE ...jqgrid自動排序分組列中的數據,這怎麼能關閉?

鏈接撥弄:http://jsfiddle.net/Rab815/p8Zsk/

$('table').jqGrid({ 
    data: data, 
    datatype: "local", 
    rowNum:100, 
    gridview: true, 
    deepempty: true, 
    hoverrows: false, 
    headertitles: true, 
    height:'600px', 
    viewrecords:true, 
    hoverrows: true, 
    sortable: true, 
    altRows: true, 
    colModel: [ 
     { label: "Group Name", name:'groupName', field:"groupName", sortable:false}, 
     { label: 'Name', field: 'name', name:'name' }, 
     { 
      label: 'Date Modified', field: 'lastGenerated', name:'lastGenerated' 
     } 
    ], 
    grouping:true, 
    groupingView: 
     { 
      groupField: ['groupName'], 
      groupColumnShow: [true], 
      groupCollapse: true, 
     }, 
    shrinkToFit: false 
}); 

enter image description here

但是我需要在這個順序顯示

enter image description here

現在,如果將數據放入編輯器中,以便每個塊出現在同一行上,則數據已經恢復按照我希望它出現的順序從數據庫中分組。但網格按'asc'順序對groupName數據字段進行排序,並且我可以判斷它不能關閉。

分組列最終將被設置爲groupColumnShow:從Olegs FIDDLE [虛假]

的答案...

包括一個

groupOrder

來自服務器的數據而不是進行映射。改變的ColModel的組名

如下

{ 
    label: "Group Name", field: "groupName", 
    sorttype: function (cellValue, obj) { 
        return obj.groupOrder; 
        //return groupOrder[obj.groupId]; 
} 

現在一切都出現在正確的順序。此解決方案允許排序,在jqgrid中默認爲「asc」,以便按分組數據本身以外的其他值排序分組數據。

謝謝!這讓我陷入了一段時間!

回答

3

問題的存在是因爲您使用datatype: "local"與從服務器加載的數據。

要解決您的問題,您可以在排序的列「groupName」中將sorttype屬性定義爲函數。該函數應該返回可以使用的值而不是的列值。例如,您可以用新的領域groupOrder擴展數據的項目,例如,用

sorttype: function (cellValue, obj) { 
    return groupOrder[obj.groupId]; 
} 

領域應在服務器上進行填充。

或者,您可以填寫當前數據模型中groupId與組訂單索引之間的映射。例如,代碼

var groupOrder = {}, i, l = data.length, groupId, groupIndex = 1; 

for (i = 0; i < l; i++) { 
    groupId = data[i].groupId; 
    if (groupOrder[groupId] === undefined) { 
     groupOrder[groupId] = groupIndex++; 
    } 
} 

在您擁有組相同的順序填充groupOrder(你可以用同樣的方式使用data[i].groupName代替data[i].groupId)。有了這樣groupOrder可以使用

sorttype: function (cellValue, obj) { 
    return groupOrder[obj.groupId]; 
} 

演示http://jsfiddle.net/p8Zsk/38/使用的方法,並顯示組以正確的順序。