extjs6 做一个从数据库拿数据做一个动态tree
时间: 2024-06-06 19:09:46 浏览: 48
我理解您的问题是如何使用ExtJS6从数据库中动态获取数据并用于构建树形结构。这可以通过以下步骤实现:
1. 定义树形结构的模型,包括节点ID、层级、父节点等属性。
2. 创建一个Store对象,使用模型定义的属性作为字段,设置proxy属性为ajax,并配置ajax请求的URL和参数。
3. 创建一个TreePanel对象,设置root属性为一个空节点,设置store属性为上一步创建的Store对象。
4. 在TreePanel的beforerender事件中,使用Store的load方法动态加载数据源。
5. 在Store的load事件中,将返回的数据转换为树形结构,并设置到root节点中。
下面是一个简单的示例代码:
定义模型:
Ext.define('MyTreeModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'text',
type: 'string'
}, {
name: 'parentId',
type: 'int'
}, {
name: 'level',
type: 'int'
}]
});
创建Store:
var myTreeStore = Ext.create('Ext.data.TreeStore', {
model: 'MyTreeModel',
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'json'
}
}
});
创建TreePanel:
var myTreePanel = Ext.create('Ext.tree.Panel', {
title: 'My Tree Panel',
root: {},
store: myTreeStore,
listeners: {
beforerender: function() {
myTreeStore.load();
}
}
});
转换数据:
function convertDataToTree(data) {
var tree = [],
children = {};
for (var i = 0; i < data.length; i++) {
var d = data[i];
d.children = [];
if (children[d.parentId]) {
children[d.parentId].children.push(d);
} else {
tree.push(d);
}
children[d.id] = d;
}
return tree;
};
在Store的load事件中转换数据:
myTreeStore.on('load', function(store, records, successful, operation) {
var treeData = convertDataToTree(records);
myTreePanel.getRootNode().removeAll();
myTreePanel.getRootNode().appendChild(treeData);
});
以上代码仅供参考,具体实现可能需要根据实际情况进行调整。希望能对您有所帮助。
阅读全文