给一个js tree的懒加载案例,以及后端代码
时间: 2024-02-11 08:04:44 浏览: 22
好的,下面是一个简单的 js tree 懒加载案例,以及后端代码(使用 PHP 实现):
前端代码:
```html
<div id="tree"></div>
<script>
$(function() {
$('#tree').jstree({
'core': {
'data': {
'url': '/get_nodes.php',
'data': function(node) {
return { 'id': node.id };
}
}
}
});
});
</script>
```
后端代码(get_nodes.php):
```php
<?php
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'test';
$parent_id = $_GET['id'];
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
$query = "SELECT * FROM nodes WHERE parent_id = $parent_id";
$result = mysqli_query($conn, $query);
$nodes = array();
while ($row = mysqli_fetch_assoc($result)) {
$node = array(
'id' => $row['id'],
'text' => $row['name'],
'state' => array('opened' => false)
);
if ($row['has_children']) {
$node['children'] = true;
}
array_push($nodes, $node);
}
echo json_encode($nodes);
mysqli_close($conn);
?>
```
注意事项:
1. 后端代码需要根据传入的父节点 ID,查询数据库获取子节点数据,并返回 JSON 格式的数据。
2. 前端代码中的 `data` 属性,指定了获取节点数据的 URL(即 get_nodes.php),以及传递给后端的参数(即当前节点的 ID)。
3. 后端代码中的 SQL 查询语句,需要根据实际的数据库表结构进行调整。
4. 在返回的节点数据中,如果一个节点有子节点,需要设置 `children` 属性为 `true`,以告知 js tree 继续加载该节点的子节点。