jqGrid - TreeGrid 交替排序

发布于 2024-12-14 10:03:21 字数 4628 浏览 3 评论 0原文

我有一个工作正常的树形网格。网格对层次结构中的列进行排序,效果很好。但是,我需要能够“打破”树的层次结构并像非树网格那样进行排序。有没有一种方法可以在不加载两个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

陈独秀 2024-12-21 10:03:21

我认为您需要做的是将用于 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 use GridUnload.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文