Javascript 如何将嵌套数据显示到树中？

进一步的进展。请看

我一直很感激你的进一步建议

---

我试图开发一个简单的extjsext4.0.2a脚本，以拖放树的形式显示一些嵌套数据。 为了尝试，我使用了一个来自

数据以users.json文件的形式提供：

{
"users": [
    {
        "id": 123,
        "name": "Ed",
        "orders": [
            {
                "id": 50,
                "total": 100,
                "order_items": [
                    {
                        "id"      : 20,
                        "price"   : 40,
                        "quantity": 2,
                        "product" : {
                            "id": 1000,
                            "name": "MacBook Pro"
                        }
                    },
                    {
                        "id"      : 21,
                        "price"   : 20,
                        "quantity": 3,
                        "product" : {
                            "id": 1001,
                            "name": "iPhone"
                        }
                    }
                ]
            }
        ]
    }
]
}

我希望将数据显示为一棵树，它的第一级节点是用户，第二级节点是订单，等等

从同一份文档中，我了解了如何定义我的模型（我相信）：

接下来，我定义一个树存储和一个树面板（对于某些选定字段）：

我看到面板、根用户和第一级用户（作为根的子节点）。我看不到任何子节点（订单、订单项目等）

我仔细查看了许多帖子，改进了很多，但仍然没有找到有效的解决方案。

进一步的进展。 请看

我很感激你的进一步建议

---

我取得了一些进展。似乎我需要修改我的json：

{
"children": [      <<<<---- use the same string to insert nested data, see below too
    {
        "id": 12,
        "name": "Ed2",
    "children": []   <<<<---- need this line, otherwise, JS tries to load subnodes for ever
},
    {
        "id": 123,
        "name": "Ed",
        "children": [    <<<<---- as above
            {
                "id": 50,
                "total": 100,
                "info" : "hello",
        "name" : "ciao",
                "children": [         <<<<---- as above
                    {
                        "id"      : 20,
                        "price"   : 40,
                        "quantity": 2,
                        "children" : {         <<<<---- as above
                            "id": 1000,
                            "name": "MacBook Pro",
            "children": []        <<<<---- as above bis
                        }
                    },
                    {
                        "id"      : 21,
                        "price"   : 20,
                        "quantity": 3,
                        "children" : {   <<<<---- as above
                            "id": 1001,
                            "name": "iPhone",
            "children": []     <<<<---- as above bis
                        }
                    }
                ]
            }
        ]
    }
]

}))

因此，我的嵌套数据的不同级别的模型之间似乎根本不需要关联

它是有效的，尽管我不确定是否有缺点。 我仍然在寻求你的建议，我只是在尝试&错误，我还没有看到潜在的逻辑。 Thks

---

我有第二个想法。使用唯一字符串“children”的技巧似乎不太好。 让我考虑一个非常简单的JSON：

{
"users": [
    {
        "id": 12,
        "name": "Ed2",
    "orders": []
},
    {
        "id": 123,
        "name": "Ed",
        "orders": [
            {
                "id": 50,
                "info" : "hello",
        "name" : "MM",
                "leaf" : 'true',
                "some_else": []    
               }]
     }
        ]

}

我希望得到的extJS树是：

Root
|--ED
|--ED2 
   |--MM

这个模型很简单

Ext.define("User", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name'
    ],

    hasMany: {model: 'Order', name: 'orders'},

    proxy: {
        type: 'ajax',  //rest
        url : 'my_file.json',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

Ext.define("Order", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name', 'info' 
    ],
    belongsTo: 'User'
});

我得到的最终输出只是：

Root
|--ED
|--ED2 

这是我的错误，还是缺少功能？有没有办法不改变我的json

---

非常感谢

我面临着同样的任务，首先很高兴看到你的帖子！ 在浏览了5个小时与之相关的官方文件后：

我能够用最好的方法填充嵌套的treestore：

（在我的例子中，主模型是Camgroup，它有许多摄像头作为“cams”：允许对每个组使用.cams（）

camgroups.json返回的smth如下：

{
    success: true,
    camgroups: [{
        "id"    : "group1",
        "name"  : "Exterior cams",
        "cams"  : [{
            "id"    : "cam3",
            "name"  : "Camera three",
            "url"   : "...",
            "img"   : "images/cams/3.png",
            "ratio" : 1.33
        },{
            "id"    : "cam4",
            "name"  : "Camera four",
            "url"   : "...",
            "img"   : "images/cams/4.png",
            "ratio" : 1.33
        }]
    }]
}

希望这将帮助您继续寻找更好的解决方案（可能需要定义一个合适的读者）

同样，在“Ext.data.reader.reader”中，我可以看到reader具有配置属性“implicitIncludes”，该属性应该“自动解析响应对象中嵌套在其他模型中的模型”，但我无法使其工作=(

干杯， 伊利亚

Ext.define("User", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name'
    ],

    hasMany: {model: 'Order', name: 'orders'},

    proxy: {
        type: 'ajax',  //rest
        url : 'my_file.json',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

Ext.define("Order", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name', 'info' 
    ],
    belongsTo: 'User'
});

Root
|--ED
|--ED2 

Ext.define('AV.store.sCamgroups', {
    extend: 'Ext.data.TreeStore',
    model: 'AV.model.Camgroup',
    autoLoad: true,
    root: {
        expanded: true,
        text: "Grouped Cameras"
    },
    proxy: {
        type: 'ajax',
        url: 'data/camgroups.json',
        reader: {
            type: 'json',
            root: 'camgroups',
            successProperty: 'success'
        }
    },
    listeners: {
        load: function(thisStore, rootnode, records, successful, eOpts){
            records.forEach(function(group){
                group.cams().each(function(cam) {
                    group.appendChild({
                        text: cam.get('name'),
                        leaf: true
                    });
                });
            });
        }
    }
});

{
    success: true,
    camgroups: [{
        "id"    : "group1",
        "name"  : "Exterior cams",
        "cams"  : [{
            "id"    : "cam3",
            "name"  : "Camera three",
            "url"   : "...",
            "img"   : "images/cams/3.png",
            "ratio" : 1.33
        },{
            "id"    : "cam4",
            "name"  : "Camera four",
            "url"   : "...",
            "img"   : "images/cams/4.png",
            "ratio" : 1.33
        }]
    }]
}