構建/嵌套json數據以填充樹狀網格

Question

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

}）;

Answer 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);

Answer 2

您在樹存儲中的根配置是什么樣的？ 默認情況下，嵌套數據的預期根屬性為“子級”，但可以更改為“數據”（在您的情況下）

Answer 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對所有存在的節點都適用...好，葉子。 否則，存儲將向每個非離開節點發出服務器請求。