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

我一直在努力使用json数据填充树形网格。我正在读取数据库中的数据，然后将其加载到树形网格中。构建/嵌套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 
    }] 
}]}

所以，我可以得到下面的输出..

enter image description here

我不是肯定如何转换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' 
      } 
     }

}）;

来源

2013-05-28 Harshrossi

我解决了这个自己... 我不得不修改我的SQL查询本身获得在嵌套格式JSON数据来填充树格：

//我得到的节点PARAM

的价值

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

来源

2013-10-11 09:12:58 Harshrossi

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

来源

2013-05-28 12:42:19 existdissolve

我有一个疑问，我知道力把什么根配置。你能告诉我在这种情况下，我应该在商店的根配置中设置什么？ – Harshrossi

你可以显示你的商店配置，因为它目前站立？ – existdissolve

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

数据格式正确，但是你有一个语法错误：

{ 
    "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添加到所有节点中，这些节点是......好了，离开了。或者商店会为每个非离开节点发出服务器请求。

来源

2013-05-30 08:30:35 rixo

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

回答

相关问题