jqGrid - TreeGrid 交替排序
我有一个工作正常的树形网格。网格对层次结构中的列进行排序,效果很好。但是,我需要能够“打破”树的层次结构并像非树网格那样进行排序。有没有一种方法可以在不加载两个 jqGrid(一个带树形网格,一个不带树形网格)的情况下执行此操作?
当我说我想“打破”层次结构时,我基本上想关闭树形网格并仅将数据加载到普通的非树形网格中。我可以加载两个网格,但我想关闭现有网格中的树形网格。
我正在使用使用本地 json 数据的树形网格:
$('#heatmap').jqGrid({
datatype: 'jsonstring',
datastr: [
{id: "0", initalColumn: "0", 0: "National", 1: "65", 2: "69", 3: "73", 4: "73", 5: "69", 6: "73", 7: "77", level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true},
{id: "1", initalColumn: "1", 0: "Central", 1: "63", 2: "68", 3: "71", 4: "71", 5: "65", 6: "73", 7: "75", level: "1", parent: "0", isLeaf: false, expanded: true, loaded: true},
{id: "2", initalColumn: "2", 0: "Store 1", 1: "64", 2: "69", 3: "70", 4: "70", 5: "63", 6: "73", 7: "74", level: "2", parent: "1", isLeaf: true, expanded: true, loaded: true},
{id: "3", initalColumn: "3", 0: "Store 2", 1: "60", 2: "65", 3: "76", 4: "73", 5: "68", 6: "74", 7: "77", level: "2", parent: "1", isLeaf: true, expanded: true, loaded: true},
{id: "4", initalColumn: "4", 0: "East", 1: "64", 2: "70", 3: "72", 4: "74", 5: "71", 6: "75", 7: "77", level: "1", parent: "0", isLeaf: false, expanded: true, loaded: true},
{id: "5", initalColumn: "5", 0: "Store 3", 1: "64", 2: "73", 3: "74", 4: "77", 5: "72", 6: "77", 7: "78", level: "2", parent: "4", isLeaf: true, expanded: true, loaded: true},
{id: "6", initalColumn: "6", 0: "Store 4", 1: "67", 2: "71", 3: "72", 4: "75", 5: "71", 6: "79", 7: "79", level: "2", parent: "4", isLeaf: true, expanded: true, loaded: true},
{id: "7", initalColumn: "7", 0: "Store 5", 1: "62", 2: "66", 3: "70", 4: "72", 5: "69", 6: "70", 7: "75", level: "2", parent: "4", isLeaf: true, expanded: true, loaded: true},
{id: "8", initalColumn: "8", 0: "West", 1: "66", 2: "69", 3: "75", 4: "73", 5: "70", 6: "73", 7: "77", level: "1", parent: "0", isLeaf: false, expanded: true, loaded: true},
{id: "9", initalColumn: "9", 0: "Store 6", 1: "59", 2: "67", 3: "73", 4: "69", 5: "68", 6: "71", 7: "74", level: "2", parent: "8", isLeaf: true, expanded: true, loaded: true},
{id: "10", initalColumn: "10", 0: "Store 7", 1: "64", 2: "68", 3: "73", 4: "73", 5: "67", 6: "71", 7: "76", level: "2", parent: "8", isLeaf: true, expanded: true, loaded: true},
{id: "11", initalColumn: "11", 0: "Store 8", 1: "71", 2: "69", 3: "78", 4: "75", 5: "72", 6: "74", 7: "79", level: "2", parent: "8", isLeaf: true, expanded: true, loaded: true}]
,
treeGridModel: 'adjacency',
treeGrid: true,
ExpandColumn: '0',
ExpandColClick: false,
gridComplete: function(){ if(typeof GridComplete == 'function'){GridComplete();} },
beforeSelectRow: function(rowid, e) { return false; },
onSelectRow: function(rowid){if(typeof GridClick == 'function'){GridClick(rowid);} },
scroll: false,
scrollOffset: 18,
scrollrows:false,
rownumbers: false,
pager:'#dummypager',
rowNum: 1000,
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.length; }
},
colNames: ["0","","Col1","Col2","Col3","Col4","Col5","Col6","Col7"],
colModel: [{ name: "initalcolumn", hidden: true},{ name: "0", sortable: true, title: false, width:250, sorttype: "string"},{ name: "1", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter1},{ name: "2", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter2},{ name: "3", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter3},{ name: "4", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter4},{ name: "5", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter5},{ name: "6", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter6},{ name: "7", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter7}],
gridview: true,
forceFit: false,
shrinkToFint: true,
height: 'auto',
hoverrows: false,
hidegrid: false,
autowidth: true,
deselectAfterSort: true,
headertitles: false,
title: false
})
I have a treegrid that is working fine. The grid sorts columns within the hierarchy and that works fine. However, I need to be able to "break" the tree's hierarchy and sort like a non-treegrid would sort. Is there a way to do this without loading two jqGrids (one with treegrid and one without treegrid)?
When I say I want to "break" the hierarchy, I basically want to turn treegrid off and just load the data in a plain non-treegrid grid. I can load two grids, but I'd like to just turn off the treegrid in the existing grid.
I am using treegrid using local json data:
$('#heatmap').jqGrid({
datatype: 'jsonstring',
datastr: [
{id: "0", initalColumn: "0", 0: "National", 1: "65", 2: "69", 3: "73", 4: "73", 5: "69", 6: "73", 7: "77", level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true},
{id: "1", initalColumn: "1", 0: "Central", 1: "63", 2: "68", 3: "71", 4: "71", 5: "65", 6: "73", 7: "75", level: "1", parent: "0", isLeaf: false, expanded: true, loaded: true},
{id: "2", initalColumn: "2", 0: "Store 1", 1: "64", 2: "69", 3: "70", 4: "70", 5: "63", 6: "73", 7: "74", level: "2", parent: "1", isLeaf: true, expanded: true, loaded: true},
{id: "3", initalColumn: "3", 0: "Store 2", 1: "60", 2: "65", 3: "76", 4: "73", 5: "68", 6: "74", 7: "77", level: "2", parent: "1", isLeaf: true, expanded: true, loaded: true},
{id: "4", initalColumn: "4", 0: "East", 1: "64", 2: "70", 3: "72", 4: "74", 5: "71", 6: "75", 7: "77", level: "1", parent: "0", isLeaf: false, expanded: true, loaded: true},
{id: "5", initalColumn: "5", 0: "Store 3", 1: "64", 2: "73", 3: "74", 4: "77", 5: "72", 6: "77", 7: "78", level: "2", parent: "4", isLeaf: true, expanded: true, loaded: true},
{id: "6", initalColumn: "6", 0: "Store 4", 1: "67", 2: "71", 3: "72", 4: "75", 5: "71", 6: "79", 7: "79", level: "2", parent: "4", isLeaf: true, expanded: true, loaded: true},
{id: "7", initalColumn: "7", 0: "Store 5", 1: "62", 2: "66", 3: "70", 4: "72", 5: "69", 6: "70", 7: "75", level: "2", parent: "4", isLeaf: true, expanded: true, loaded: true},
{id: "8", initalColumn: "8", 0: "West", 1: "66", 2: "69", 3: "75", 4: "73", 5: "70", 6: "73", 7: "77", level: "1", parent: "0", isLeaf: false, expanded: true, loaded: true},
{id: "9", initalColumn: "9", 0: "Store 6", 1: "59", 2: "67", 3: "73", 4: "69", 5: "68", 6: "71", 7: "74", level: "2", parent: "8", isLeaf: true, expanded: true, loaded: true},
{id: "10", initalColumn: "10", 0: "Store 7", 1: "64", 2: "68", 3: "73", 4: "73", 5: "67", 6: "71", 7: "76", level: "2", parent: "8", isLeaf: true, expanded: true, loaded: true},
{id: "11", initalColumn: "11", 0: "Store 8", 1: "71", 2: "69", 3: "78", 4: "75", 5: "72", 6: "74", 7: "79", level: "2", parent: "8", isLeaf: true, expanded: true, loaded: true}]
,
treeGridModel: 'adjacency',
treeGrid: true,
ExpandColumn: '0',
ExpandColClick: false,
gridComplete: function(){ if(typeof GridComplete == 'function'){GridComplete();} },
beforeSelectRow: function(rowid, e) { return false; },
onSelectRow: function(rowid){if(typeof GridClick == 'function'){GridClick(rowid);} },
scroll: false,
scrollOffset: 18,
scrollrows:false,
rownumbers: false,
pager:'#dummypager',
rowNum: 1000,
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.length; }
},
colNames: ["0","","Col1","Col2","Col3","Col4","Col5","Col6","Col7"],
colModel: [{ name: "initalcolumn", hidden: true},{ name: "0", sortable: true, title: false, width:250, sorttype: "string"},{ name: "1", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter1},{ name: "2", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter2},{ name: "3", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter3},{ name: "4", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter4},{ name: "5", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter5},{ name: "6", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter6},{ name: "7", sortable: true, title: false, sorttype: "int", align:"right", formatter: formatter7}],
gridview: true,
forceFit: false,
shrinkToFint: true,
height: 'auto',
hoverrows: false,
hidegrid: false,
autowidth: true,
deselectAfterSort: true,
headertitles: false,
title: false
})
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我认为您需要做的是将用于
datastr
参数的数组保存在变量中。该变量可用于创建树形网格或“标准”网格。您应该重新创建网格GridUnload 方法,如果你想从树状网格切换到标准网格。在答案中,您将找到演示如何使用的演示网格卸载。
I think what you need to do is to hold the array which you use for
datastr
parameter in a variable. The variable could be used to create either Tree Grid or a "standard" grid. You should recreate the grid with respect of GridUnload method if you want switch from Tree Grid to the standard grid. In the answer you will find the demo which demonstrate how to useGridUnload
.