jQuery EasyUI 树形菜单 - 树形菜单加载父-子节点
jQuery EasyUI 树形菜单
jQuery EasyUI 是一款基于 jQuery 的 UI 组件库，其中包括了丰富的 UI 组件，其中之一就是树形菜单（tree）组件。树形菜单可以非常方便地展现层次结构的数据，并通过选择节点来进行操作。
加载父-子节点
树形菜单最基本的是加载数据，而其中最简单的一种则是加载父-子节点数据。
首先需要准备好数据。这里我们模拟了一个数据结构：
[
{
"id": "1",
"text": "Parent 1"
},
{
"id": "2",
"text": "Parent 2",
"children": [
{
"id": "21",
"text": "Child 1 of Parent 2"
},
{
"id": "22",
"text": "Child 2 of Parent 2"
}
]
},
{
"id": "3",
"text": "Parent 3",
"children": [
{
"id": "31",
"text": "Child 1 of Parent 3"
}
]
}
]
其中每个节点有 id 和 text 两个属性，可以根据实际情况添加其他属性。如果一个节点有子节点，需要将子节点放入 children 属性中。
接下来是加载这个数据的代码：
$('#tree').tree({
data: [
{
"id": "1",
"text": "Parent 1"
},
{
"id": "2",
"text": "Parent 2",
"children": [
{
"id": "21",
"text": "Child 1 of Parent 2"
},
{
"id": "22",
"text": "Child 2 of Parent 2"
}
]
},
{
"id": "3",
"text": "Parent 3",
"children": [
{
"id": "31",
"text": "Child 1 of Parent 3"
}
]
}
]
});
这里 #tree 是树形菜单的 ID，data 是数据源。使用 tree() 方法来初始化树形菜单，并将数据作为参数传入。
样式配置
树形菜单的样式可以加以配置，比如可以设置节点开闭状态图标、鼠标悬停状态等。
以下是一些基本样式配置：
$('#tree').tree({
data: [...],
lines: true, // 是否显示虚线框
animate: true, // 是否使用动画效果
checkbox: true, // 是否显示复选框
onlyLeafCheck: true, // 是否只在子节点显示复选框
dnd: true, // 是否开启拖拽功能
onBeforeExpand: function(node) {
// 节点展开前的回调函数
},
onContextMenu: function(e, node) {
// 右键菜单的回调函数
}
});
其中还有很多其他的配置属性，可以根据需要自行参考 EasyUI 的官方文档。
事件绑定
树形菜单还有更多的事件可以绑定。以下是一些常见的事件以及如何绑定：
$('#tree').tree({
data: [...],
onClick: function(node) {
// 点击节点的回调函数
console.log(node.text);
},
onDblClick: function(node) {
// 双击节点的回调函数
alert(node.text);
},
onCheck: function(node, checked) {
// 勾选节点或取消勾选的回调函数
console.log(node.text, checked);
},
onLoadSuccess: function(node, data) {
// 菜单加载成功后的回调函数
console.log(data);
}
});
以上代码演示了如何绑定 onClick、onDblClick、onCheck、onLoadSuccess 四个事件的回调函数。树形菜单还有更多事件可供绑定，可以根据实际需求进行绑定。
总结
以上是关于 jQuery EasyUI 树形菜单的基本介绍，包括了如何加载父-子节点数据、样式配置、事件绑定等内容。树形菜单是 Web 前端中经常用到的组件之一，学会了它可以使页面更加美观、易于操作。