Dgrid 未正确渲染树结构答案

【问题标题】：Dgrid not rendering the tree structure correctlyDgrid 未正确渲染树结构
【发布时间】：2015-11-02 17:18:07
【问题描述】：

我是 JavaScript、dojo dgrid、dstore 的初学者，但仍然难以正确覆盖 store 的属性方法：

我的数据结构：

[{"id":"T1","name":"Test","desc":"Rectangular 1",qty":null,"parent":null},    
{"id":"C1","name":"Test 2","qty":0.0,"parent":"T1"},    
{"id":"S1","name":"Test 3","qty":6.0,"parent":"C1"},    
{"id":"S2","name":"Test 4","qty":6.0,"parent":"C1"},    
{"id":"S3","name":"Test 5","qty":6.0,"parent":"C1"}
]


        var StandardGrid = declare([Grid, Keyboard, Selection, Selector, Editor, dgridTree]);
        var CustomStore= declare([Rest, dstoreTree]);

        var myStore = new CustomStore({
            target: "./data.json",
            idProperty: "id",
            getRootCollection: function () {
                return this.root.filter({ parent: null });                  
            },
            getChildren: function (object) {
                return object.parent = object.id;
            },
            mayHaveChildren: function (object) {
                return object.parent == null;
            },
        });

        var treeGrid = window.treeGrid = new StandardGrid({
            collection: myStore.getRootCollection(),
            columns: [
                { renderExpando: true, label: "Name", field: "name", sortable: false },
                { label: "Quantity", field: "qty" },
            ]
        }, "treeGrid");

        treeGrid.startup();

我也尝试参考以下链接，但仍然无法弄清楚： dgrid 0.4.0 tree looks flat before user interacts

提前感谢和感谢。

【问题讨论】：

您的数据无效，缺少一个"
当您说它“未正确渲染”时，它是如何渲染与应该如何渲染？不过，看起来您的 getChildren 实现确实不正确，如果您的数据同时返回所有项目，您可能不想使用 Rest...
这棵树应该有 3 层，其中根 (id=T1) 之后是第二层 (id=C1)，最后是第三层 (id=S1,S2,S3)。目前它列出了所有没有树的数据。我会尝试用其他人（如内存存储）替换 Rest。您能否告诉我我的 getChildren 实现与我当前的数据集有什么问题？

标签： javascript tree dojo dgrid dstore

【解决方案1】：

在将 Rest store 替换为 RequestMemory 存储后，我终于使 Dgrid Tree 层次结构正常工作，并将附加字段 hasChildren 放入数据集中以用于 mayHaveChildren 方法，并且在 Ken Franqueiro 的建议下也可以使用 getChildren。

{"id":"C1","name":"Test 2","qty":0.0,"parent":"T1", "hasChidlren":true}

        var StandardGrid = declare([Grid, Keyboard, Selection, Selector, Editor, Tree]);
        var MemoryTreeStore = declare([RequestMemory, TreeStore]);

        var myStore = new MemoryTreeStore({
            target: "./data.json",
            idProperty: "id",
            getRootCollection: function () {
                return this.root.filter({parent: null});                    
            },
            getChildren: function (object) {
                return this.root.filter({parent: object.id});
            },
            mayHaveChildren: function (object) {
                return object.parent == null || object.hasChildren == true;
            }
        });

我认为必须考虑他们如何构建树数据集才能覆盖 dstore/Tree 方法。

【讨论】：