extjs6 做一个从数据库拿数据做一个动态tree
时间: 2023-10-08 18:12:28 浏览: 74
用ExtJS实现动态载入树
5星 · 资源好评率100%
很高兴能为你解答问题!针对你的问题,可以通过以下步骤实现从数据库中获取数据并生成动态tree:
1. 后台使用Java或其他后端语言从数据库中查询所需数据,并以JSON格式返回给前端。
2. 前端使用ExtJS6中的TreePanel组件,通过Ajax请求从后台获取JSON数据。
3. 解析JSON数据,动态生成TreePanel中的节点。
下面是一些示例代码:
后台Java代码:
```
// 假设数据库中存储的数据如下:id=1, name='Node1', parent_id=0;id=2, name='Node2', parent_id=1
// 查询数据库获取数据
List<Node> nodeList = nodeDao.queryAllNodes();
// 将数据转换成JSON格式
JSONArray jsonArr = new JSONArray();
for (Node node : nodeList) {
JSONObject jsonObj = new JSONObject();
jsonObj.put("id", node.getId());
jsonObj.put("text", node.getName());
jsonObj.put("parent_id", node.getParentId());
jsonArr.add(jsonObj);
}
// 将JSON数据返回给前端
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(jsonArr.toString());
```
前端ExtJS6代码:
```
Ext.define('Node', {
extend: 'Ext.data.Model',
fields: ['id', 'text', 'parent_id']
});
Ext.define('MyTreePanel', {
extend: 'Ext.tree.Panel',
store: Ext.create('Ext.data.TreeStore', {
model: 'Node',
proxy: {
type: 'ajax',
url: 'path/to/server',
reader: {
type: 'json',
root: ''
}
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
}),
root: {
id: '0',
text: 'Root',
expanded: true
}
});
// 创建TreePanel并将其添加到页面上
Ext.onReady(function() {
Ext.create('MyTreePanel', {
renderTo: Ext.getBody(),
width: 300,
height: 400
});
});
```
希望能帮助到你解决问题!如果您还有任何问题,请随时问我。
阅读全文