结构化/嵌套 json 数据以填充树形网格

Posted 2023-02-26

【中文标题】结构化/嵌套 json 数据以填充树形网格

【英文标题】：Structuring/Nesting of json data to populate a tree grid

【发布时间】：2013-05-28 12:14:39

【问题描述】：

我一直在努力用 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
]

在我的树形面板中，第一列是树形列。 我为树形面板设置了以下属性

                displayField: 'bike',
                rootVisible: false,
                useArrows: true,

我可以将它加载到树形网格中，但问题是每个数据都显示在树中的单独节点中。我知道这是因为 json 结构不适合树。

我想以特定格式转换或嵌套 json 数据，如下所示：

"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'
            
        

);

【参考方案1】：

我自己解决了这个问题... 我必须修改我的 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);

【参考方案2】：

您在 Tree Store 中的根配置是什么样的？默认情况下，嵌套数据的预期根属性是“children”，但可以（在您的情况下）更改为“data”

【讨论】：

我对此表示怀疑，我不知道到底应该在根配置中放入什么。你能告诉我在这种情况下我应该在我的商店的根配置中设置什么吗？

@existdissolvevar 我在上面的问题中包含了我的商店

【参考方案3】：

数据格式正确，但有语法错误：

    "bike": "Suzuki",
    "data": [
        "bike": "Suzuki",
        "color": "White",
        "cost": 800000"
    ]

在费用之后有一个意想不到的" char。修复此问题后，数据可以使用如下配置的树：

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 添加到...好吧，叶子的所有节点。否则store会对每个非离开节点进行服务器请求。