最近搜索
layui 树形菜单文档
管理员
2025-08-24 10:00
点击-节点的回调方法
layui.tree({
elem: '#demo'
,nodes: [{ //节点数据
name: '节点A'
,children: [{
name: '节点A1'
}]
}, {
name: '节点B'
,children: [{
name: '节点B1'
,alias: 'bb' //可选
,id: '123' //可选
}, {
name: '节点B2'
}]
}]
,click: function(node){
console.log(node) //node即为当前点击的节点数据
}
});
点击节点得到的node值
{"name": "节点B1","alias": "bb","id": "123"}如果我的树是无限的。我想动态加载怎么办。
https://blog.csdn.net/qq_45510899/article/details/107010411
https://blog.csdn.net/m0_74018330/article/details/131672618
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui Tree 动态加载示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-v2.5.7/dist/css/layui.css" media="all">
</head>
<body>
<div id="tree"></div>
<script src="https://cdn.jsdelivr.net/npm/layui-v2.5.7/dist/layui.all.js"></script>
<script>
layui.use('tree', function(){
var tree = layui.tree;
// 初始化树形结构
tree.render({
elem: '#tree', // 绑定元素
showCheckbox: true, // 是否显示复选框
onlyIconControl: true, // 仅通过图标控制
data: [], // 初始数据
click: function(node){ // 点击节点时触发
if(node.children && node.children.length === 0) { // 如果没有子节点，则进行异步加载
loadData(node);
}
}
});
// 异步加载数据函数
function loadData(node) {
// 这里使用 jQuery 的 $.ajax 或其他 AJAX 方法来获取数据
$.ajax({
url: '/api/get-children', // 假设这是你的 API 接口，用来获取子节点数据
type: 'GET',
data: { id: node.id }, // 假设你需要传递父节点的 ID 来获取子节点
success: function(res) {
// 假设返回的数据格式是 { status: 'ok', data: [...] }
if(res.status === 'ok') {
tree.setChecked(node.elem, true); // 可选，设置节点为选中状态
tree.reloadChildData(node, res.data); // 重新加载子节点数据
} else {
console.error('Failed to load data');
}
},
error: function() {
console.error('Error occurred while loading data');
}
});
}
});
</script>
</body>
</html>动态修改 分支的数据。
// 假设你从服务器获取了新的数据 newData
var newData = [...]; // 新的数据结构，与上面格式相同
// 使用reload方法更新树形结构数据
tree.reload('demoId', {data: newData}); // 'demoId' 是你在初始化时设置的唯一标识符
// 假设我们要在节点1下添加一个子节点
var childNode = {title: '新子节点', id: 6};
var treeInstance = tree.getTreeInstance('demoId'); // 获取树实例对象
treeInstance.appendNodes(1, [childNode]); // 在id为1的节点下添加新节点，这里的1是节点的id值
tree.render({
elem: '#treeDemo',
data: [], // 初始为空数组或部分静态数据
showCheckbox: true,
id: 'demoId',
click: function(node){ // 点击事件处理函数
if(node.children && node.children.length === 0) { // 如果当前节点没有子节点，则进行异步加载
$.ajax({
url: '/api/get-children', // 假设的API接口，用于获取子节点数据
data: {parentId: node.id}, // 将父节点的id作为参数传递，以便服务器知道需要返回哪个节点的子节点数据
success: function(res) {
treeInstance.appendNodes(node.id, res.data); // 使用返回的数据更新节点下的子节点
}
});
}
}
});动态加载分支。我就维护好我们 树菜单就好了。 实时渲染数据即可。
联系站长
站长微信:xiaomao0055
站长QQ:14496453
按分类分组
按日期分组