ext js6做tree拿数据库里面的数据
时间: 2024-05-11 13:15:24 浏览: 16
1. 创建一个store来获取数据库里面的数据
```
Ext.define('MyApp.store.TreeStore', {
extend: 'Ext.data.TreeStore',
alias: 'store.tree',
proxy: {
type: 'ajax',
url: 'tree.php', //修改为你的后端接口地址
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
```
2. 创建一个tree panel并使用store加载数据
```
Ext.define('MyApp.view.TreePanel', {
extend: 'Ext.tree.Panel',
xtype: 'treepanel',
requires: [
'MyApp.store.TreeStore'
],
store: {
type: 'tree'
},
rootVisible: false,
columns: [
{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1
}
]
});
```
3. 编写后端接口返回数据
```
<?php
//连接数据库
$conn = new mysqli("localhost", "root", "", "test");
//查询数据
$result = $conn->query("SELECT id, text, parent_id FROM tree");
//将查询结果转换为树形结构
$data = array();
while ($row = $result->fetch_assoc()) {
$data[$row['id']] = array(
'id' => $row['id'],
'text' => $row['text'],
'parent_id' => $row['parent_id'],
'children' => array()
);
}
$tree = array();
foreach ($data as &$node) {
if ($node['parent_id'] != null) {
$data[$node['parent_id']]['children'][] = &$node;
} else {
$tree[] = &$node;
}
}
//返回树形结构数据
echo json_encode(array(
'success' => true,
'data' => $tree
));
```
4. 修改数据库中的数据
如果要修改数据库中的数据,可以在树节点的编辑事件中发送请求到后端接口,将修改后的数据保存到数据库中,然后重新加载树数据即可。
```
listeners: {
edit: function (editor, context) {
//获取修改后的数据
var record = context.record,
newData = record.getData();
//发送请求保存到数据库
Ext.Ajax.request({
url: 'update.php', //修改为你的后端接口地址
method: 'POST',
params: newData,
success: function (response) {
Ext.toast('保存成功');
},
failure: function (response) {
Ext.toast('保存失败');
}
});
}
}
```
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)