如何將嵌套數據顯示到樹中？
[英]How do I show nested data into a tree?
問題描述
我總是很感激任何進一步的建議。
我正在嘗試開發一個簡單的extJS Ext 4.0.2a腳本，將一些嵌套數據顯示為拖放樹。 為了嘗試，我使用http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader中的一個簡單示例
數據以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"
}
}
]
}
]
}
]
}
我希望將數據顯示為樹，其第一級節點是用戶，第二級節點是訂單，依此類推。
從同一個doc，我學習如何定義我的模型（我相信）：
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: {model: 'Order', name: 'orders'},
proxy: {
type: 'ajax', // rest
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
}
})
;
Ext.define("Order", {
extend: 'Ext.data.Model',
fields: [
'id', 'total'
],
hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
belongsTo: 'User'
});
Ext.define("OrderItem", {
extend: 'Ext.data.Model',
fields: [
'id', 'price', 'quantity', 'order_id', 'product_id'
],
belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
});
Ext.define("Product", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: 'OrderItem'
});
接下來，我定義了一個樹存儲和一個樹面板（對於某些選定的字段）：
var store = Ext.create('Ext.data.TreeStore', {
model: 'User',
autoLoad: true,
autoSync: true,
root: {
name: "Root node",
id: '0',
expanded: true
},
sorters: [{
property: 'id',
direction: 'ASC' // DESC
}]
});
var tree = Ext.create('Ext.tree.Panel', {
store: store,
displayField: 'name', // what nodes display (default->text)
columns: [{
xtype: 'treecolumn',
text: 'name',
dataIndex: 'name',
width: 150,
sortable: true
}, {
text: 'total',
dataIndex: 'total',
width: 150,
flex: 1,
sortable: true
}, {
text: 'price',
dataIndex: 'price',
width: 50,
flex: 1,
sortable: true
},{
text: 'quantity',
dataIndex: 'quantity',
width: 150,
flex: 1
}, {
text: 'id',
dataIndex: 'id',
flex: 1,
width: 15,
sortable: true
}],
collapsible: true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop', // see Ext.tree.plugin.TreeViewDragDrop
nodeHighlightColor : '7B68EE',
nodeHighlightOnDrop : true,
nodeHighlightOnRepair: true,
enableDrag: true,
enableDrop: true
}
},
renderTo: 'tree-div',
height: 300,
width: 900,
title: 'Items',
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function(){
tree.collapseAll();
}
}]
}]
});
});
我看到面板，根和第一級用戶（作為根的子節點）。 我沒有看到任何子節點（訂單，order_items等）。
我仔細查看了一些帖子，改進了很多東西，但仍然錯過了一個有效的解決方案。
2 個解決方案
解決方案1
4 2011-10-11 07:36:05
我正面臨同樣的任務，首先很高興遇到你的帖子！ 經過5個小時的探索有關它的官方文檔：
- http://docs.sencha.com/ext-js/4-0/#!/guide/data
- http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
我能夠填充我的嵌套樹庫，沒有比這更好的了：
（在我的例子中，主要模型是Camgroup，其中有很多相機作為'cams'：允許每個組使用.cams（））
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
});
});
});
}
}
});
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'，它被認為是“自動解析嵌套在響應對象中的其他模型中的模型”，但我無法使其工作=（
干杯，伊利亞
解決方案2
1 2011-10-03 16:14:15
我感謝任何進一步的建議。
我取得了一些進展。 看來我需要修改我的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
}
}
]
}
]
}
]
}
然后，以下模型定義有效：
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name', 'info', 'price', 'quantity', 'order_id', 'product_id'
],
proxy: {
type: 'ajax', //rest
url : 'ex1.json',
reader: {
type: 'json',
root: 'children'
}
}
}）;
因此，似乎根本不需要我的嵌套數據的不同級別的模型之間的關聯。
它有效，雖然我不確定是否有缺點。 我仍在尋找你的建議，我嘗試和錯誤，我還沒有看到潛在的邏輯。 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？
非常感謝
我們如何提高使用遞歸組件呈現深層嵌套樹數據的 React 應用程序的性能
[英]How do we improve the performance of a react application which renders the the deep nested tree data with a recursive component
陷入一個邏輯問題。 如何遍歷具有未知嵌套數組的json樹？
[英]Stuck in a logical problem. How do I loop through a json tree having unknown nested arrays?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.