jEasyUI 树形菜单加载父/子节点学习笔记
介绍
jEasyUI 是一款基于 jQuery 的 UI 组件库，提供了丰富的组件，可以快速构建出各种功能强大、交互友好的 Web 应用程序。其中树形菜单(Tree)组件是非常常用和实用的。
本文将介绍如何使用 jEasyUI 中的树形菜单组件来加载父/子节点，并给出详细的代码实例。
如何加载父节点
jEasyUI 树形菜单默认只加载根节点的子节点，当需要展开某个节点时，会自动向后台发送请求获取该节点的子节点，并将子节点添加到该节点下面。如果需要直接展示所有节点（包括根节点和所有子节点），则需要通过设置 data 属性来实现。
javascriptCopy Code//HTML 页面中设置
<ul id="tree"></ul>
//JS 代码中设置
$('#tree').tree({
url: 'get_tree_data.php', //后台接口
checkbox: true, //是否显示复选框
loadFilter: function(data){
return data;
},
onLoadSuccess: function(node, data) {
if (data.length > 0) {
var roots = $("#tree").tree("getRoots");
for (var i = 0; i < roots.length; i++) {
$('#tree').tree('expand', roots[i].target);
}
}
}
});
在上述代码中，我们通过设置 url 属性来指定后台接口，通过 loadFilter 函数对返回的数据进行过滤，这个函数默认返回原始数据，我们可以在这里进行数据的加工处理。在 onLoadSuccess 事件中，我们获取所有根节点，并依次展开每个根节点，从而实现了展开所有节点的目的。
如何加载子节点
javascriptCopy Code$('#tree').tree({
url: 'get_tree_data.php', //后台接口
checkbox: true, //是否显示复选框
loadFilter: function(data){
return data;
},
onExpand: function(node) {
$(this).tree('options').url = 'get_tree_data.php?id=' + node.id; //发送请求获取子节点数据
$(this).tree('reload', node.target); //重新加载指定节点下的子节点
}
});
在上述代码中，我们通过设置 onExpand 事件，在节点展开时向后台发送请求获取该节点的子节点。在获取到子节点数据后，我们调用 reload 方法重新加载该节点下的子节点。需要注意的是，该方法的参数应传入该节点的目标元素。
实例演示
下面是一个完整的使用 jEasyUI 树形菜单加载父/子节点的实例，供参考。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree Demo</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.6/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.6/themes/icon.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.6/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tree"></ul>
<script>
$('#tree').tree({
url: 'get_tree_data.php',
checkbox: true,
loadFilter: function(data){
return data;
},
onLoadSuccess: function(node, data) {
if (data.length > 0) {
var roots = $("#tree").tree("getRoots");
for (var i = 0; i < roots.length; i++) {
$('#tree').tree('expand', roots[i].target);
}
}
},
onExpand: function(node) {
$(this).tree('options').url = 'get_tree_data.php?id=' + node.id;
$(this).tree('reload', node.target);
}
});
</script>
</body>
</html>
在上述实例代码中，我们在 HTML 页面中定义一个 ul 元素，并赋予其 ID 值为 tree。通过调用 $('#tree').tree({...}) 方法来初始化树形菜单组件，并设置必要的属性和事件。
需要注意的是，由于本文只是演示如何加载父/子节点，因此没有提供后台数据接口的实现，读者需要自行编写获取数据的后台脚本，并修改示例中的 url 和 onExpand 事件。