结构化/嵌套json数据以填充树网格
我一直在努力用json数据填充树网格。我从数据库中读取数据,然后将其加载到树网格中 我从数据库中获取的json数据的格式与下面给出的格式类似:结构化/嵌套json数据以填充树网格,json,extjs,extjs4.1,Json,Extjs,Extjs4.1,我一直在努力用json数据填充树网格。我从数据库中读取数据,然后将其加载到树网格中 我从数据库中获取的json数据的格式与下面给出的格式类似: { "data": [{ "bike": "Yamaha", "color": "Black", "cost": 870000 },{ "bike": "Honda", "color": "Red", "cost": 675000 },{ "bike": "Honda",
{ "data": [{
"bike": "Yamaha",
"color": "Black",
"cost": 870000
},{
"bike": "Honda",
"color": "Red",
"cost": 675000
},{
"bike": "Honda",
"color": "Blue",
"cost": 690000
},{
"bike": "Suzuki",
"color": "White",
"cost": 800000"
},{
"bike": "Harley",
"color": "Yellow",
"cost": 980000
},{
"bike": "Harley",
"color": "Black",
"cost": 880000
}]}
{"data": [{
"bike": "Yamaha",
"data": [{
"bike": "Yamaha",
"color": "Black",
"cost": 870000
}]
},{
"bike": "Honda",
"data": [{
"bike": "Honda",
"color": "Red",
"cost": 675000
},
{
"bike": "Honda",
"color": "Blue",
"cost": 690000
}]
},{
"bike": "Suzuki",
"data": [{
"bike": "Suzuki",
"color": "White",
"cost": 800000"
}]
},{
"bike": "Harley",
"data": [{
"bike": "Harley",
"color": "Yellow",
"cost": 980000
}]
},{
"bike": "Harley",
"data": [{
"bike": "Harley",
"color": "Black",
"cost": 880000
}]
}]}
在“我的树”面板中,第一列是树列。
我已经为树面板设置了以下属性
displayField: 'bike',
rootVisible: false,
useArrows: true,
我可以将其加载到树网格中,但每个数据都显示在树中的单独节点中。我知道这是因为json结构不适合树
我想以如下所示的特定格式转换或嵌套json数据:
{ "data": [{
"bike": "Yamaha",
"color": "Black",
"cost": 870000
},{
"bike": "Honda",
"color": "Red",
"cost": 675000
},{
"bike": "Honda",
"color": "Blue",
"cost": 690000
},{
"bike": "Suzuki",
"color": "White",
"cost": 800000"
},{
"bike": "Harley",
"color": "Yellow",
"cost": 980000
},{
"bike": "Harley",
"color": "Black",
"cost": 880000
}]}
{"data": [{
"bike": "Yamaha",
"data": [{
"bike": "Yamaha",
"color": "Black",
"cost": 870000
}]
},{
"bike": "Honda",
"data": [{
"bike": "Honda",
"color": "Red",
"cost": 675000
},
{
"bike": "Honda",
"color": "Blue",
"cost": 690000
}]
},{
"bike": "Suzuki",
"data": [{
"bike": "Suzuki",
"color": "White",
"cost": 800000"
}]
},{
"bike": "Harley",
"data": [{
"bike": "Harley",
"color": "Yellow",
"cost": 980000
}]
},{
"bike": "Harley",
"data": [{
"bike": "Harley",
"color": "Black",
"cost": 880000
}]
}]}
这样我就可以得到下面的输出
我不知道如何转换json数据。我在网上找不到合适的解决办法。请帮忙
这就是我的商店的样子:
var MyStore = Ext.create('Ext.data.TreeStore', {
autoLoad: true,
autoSync: true,
storeId: 'MyStore',
model: 'model',
proxy: {
type: 'ajax',
api: {
read: 'http://localhost/Files/data.json'
},
reader: {
type: 'json',
messageProperty: 'message',
successProperty: 'success',
root: 'data',
totalProperty: 'total'
}
}
})) 树存储中的根配置是什么样子的?默认情况下,嵌套数据的预期根属性为“children”,但可以(在您的情况下)更改为“data”数据格式正确,但其中有语法错误:
{
"bike": "Suzuki",
"data": [{
"bike": "Suzuki",
"color": "White",
"cost": 800000"
}]
}
成本后有一个意外的“
字符。修复后,数据使用如下配置的树:
Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody()
,height: 300
,rootVisible: false
,columns: [{
xtype: 'treecolumn'
,dataIndex: 'bike'
,text: 'Bikes'
},{
dataIndex: 'color'
,text: 'Color'
,flex: 2
},{
dataIndex: 'cost'
,text: 'Cost'
}]
,store: {
autoLoad: true,
autoSync: true,
fields: ['bike', 'color', 'cost'],
proxy: {
type: 'memory'
,reader: {
type: 'json'
,root: 'data'
}
,data: data // that's your data object
}
}
});
此外,如果您的服务器不支持过滤(例如平面json文件),或者您希望避免大量请求(这可能是您首先尝试加载嵌套数据的原因),您必须将leaf:true
添加到所有属于……嗯,leave的节点。否则,商店将为每个非leave节点发出服务器请求。我自己解决了这个问题。。。
我必须修改SQL查询本身,以获得嵌套格式的Json数据,以填充树网格:
//我得到节点参数的值
$node = $_POST['node'];
if (empty($node)){
$node = $_GET['node'];
}
//根据节点类型查询数据
if (strcmp(strtolower($node),"root")==0) {
// If root node then query all bikes with remaining data as null for setting the parent nodes
$query = "Select 'PARENT_' || b.id as ID, Null as color, Null as cost from Bikes b";
} else {
// Splitting the Id from string
$node = explode("_", $node);
$nodeType = $node[0];
$bikeID = $node[1];
if (strcmp(strtolower($nodeType),"parent")==0) {
// if node is a parent node, then load all child nodes based on bike ID
$query = "select 'CHILD_' || b.id as ID, b.color as color, b.cost as cost from Bikes b where b.id = ".sprintf('%d',intval($bikeID));
}
}
// execute the query
execute($query);
我对此表示怀疑,我不知道在根配置中到底应该设置什么。你能告诉我在这种情况下,我应该在我的存储的根配置中设置什么吗?@existsolvevar我已经在上面的问题中包括了我的存储