extjs6 做一个从数据库拿数据做一个动态tree
时间: 2023-10-08 18:12:27 浏览: 161
首先,需要使用 ExtJS 6 的 TreePanel 组件来实现动态树形结构。然后通过 Ext.data.TreeStore 数据仓库来获取从数据库中获取数据。
以下是一个基本的示例代码,可以根据自己的需求进行修改和完善:
```
Ext.define('MyApp.view.MyTreePanel', {
extend: 'Ext.tree.Panel',
xtype: 'mytreepanel',
requires: [
'Ext.data.TreeStore'
],
store: {
type: 'tree',
proxy: {
type: 'ajax',
url: 'treeData.php' // 从服务器获取数据
},
root: {
text: 'Root',
id: 'root',
expanded: true
}
},
rootVisible: false,
displayField: 'name',
columns: [{
xtype: 'treecolumn',
dataIndex: 'name',
flex: 1
}]
});
```
在这个代码中,我们使用了 ExtJS 6 的 TreePanel 组件,并且使用了 Ext.data.TreeStore 数据仓库来获取数据。在 store 中设置了一个 ajax 的代理,用于从服务器获取数据。在 root 中设置了根节点的一些基本属性,比如 text 表示根节点的文本,id 表示根节点的 id,expanded 表示根节点是否展开。rootVisible 表示是否显示根节点,displayField 表示显示在节点上的字段名,columns 表示表格中的列信息。
在服务器端,我们需要提供一个返回树形数据的接口。以下是一个示例 PHP 代码:
```
<?php
$con = mysqli_connect("localhost","my_user","my_password","my_db");
// 获取根节点数据
$result = mysqli_query($con,"SELECT * FROM tree WHERE parent_id IS NULL");
$treeData = array();
while($row = mysqli_fetch_assoc($result)) {
$node = array(
'id' => $row['id'],
'text' => $row['name']
);
// 获取子节点数据
$result2 = mysqli_query($con,"SELECT * FROM tree WHERE parent_id = ".$row['id']);
$childNodes = array();
while($row2 = mysqli_fetch_assoc($result2)) {
$childNode = array(
'id' => $row2['id'],
'text' => $row2['name']
);
array_push($childNodes, $childNode);
}
if(count($childNodes) > 0) {
$node['children'] = $childNodes;
}
array_push($treeData, $node);
}
echo json_encode($treeData);
?>
```
在这个代码中,我们通过 mysqli 函数连接到数据库,并获取根节点数据。然后,我们循环遍历每个根节点,获取子节点数据,并将根节点和子节点数据组合成一个树形结构。最后,将树形结构转换为 JSON 格式,并输出到客户端。
以上就是一个基本的从数据库中获取数据,并使用 ExtJS 6 的 TreePanel 组件展示动态树形结构的示例。
阅读全文