jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
引入jQuery EasyUI
首先需要在HTML文件中引入jQuery和jQuery EasyUI的库文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Tree Menu</title>
// 引入jQuery和EasyUI库文件
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<link rel="stylesheet" href="easyui.css">
</head>
<body>
// 创建树形菜单的DOM元素
<div id="myTree"></div>
</body>
</html>
创建树形菜单
在HTML文件中创建树形菜单的DOM元素，并使用jQuery EasyUI中的tree组件进行初始化。
<div id="myTree"></div>
$(function(){
// 使用tree组件进行初始化
$('#myTree').tree({
// tree的数据来源，此处使用静态数组
data: [
{
text: 'Parent 1',
state: 'closed',
children: [
{
text: 'Child 1',
id: 'child1'
},
{
text: 'Child 2',
id: 'child2'
}
]
},
{
text: 'Parent 2',
state: 'closed',
children: [
{
text: 'Child 3',
id: 'child3'
},
{
text: 'Child 4',
id: 'child4'
}
]
}
]
});
})
tree配置项
- data：树形菜单的数据来源，可以是JSON数据或XML数据。
- lines：是否显示树形菜单节点之间的连线，默认值为true。
- animate：在树形菜单展开或者收起时是否显示展开或者收起的动画效果，默认值为false。
- checkbox：是否显示复选框，默认值为false。
- cascadeCheck：是否级联选中父节点和子节点的复选框，默认值为false。
添加复选框
在创建树形菜单时设置checkbox属性为true即可在节点前添加复选框。
$(function(){
// 设置checkbox为true
$('#myTree').tree({
checkbox: true,
data: [
// ...
]
});
})
复选框事件
- onClick：复选框被点击后执行的函数。
- onCheck：复选框的选中状态发生改变时执行的函数。
$('#myTree').tree({
checkbox: true,
data: [
// ...
],
// 复选框被点击后执行的函数
onClick: function(node){
$('#myTree').tree('toggle', node.target);
},
// 复选框的选中状态发生改变时执行的函数
onCheck: function(node, checked){
// 选中操作
if(checked){
// 通过getChildNode方法获取node节点下的所有子节点
var children = $('#myTree').tree('getChildNode', node.target);
// 遍历所有子节点，递归设置选中状态
for(var i=0; i<children.length; i++){
$('#myTree').tree('check', children[i].target);
}
// 递归设置父节点选中状态
setParentNodeCheck(node);
}
// 取消选中操作
else{
// 通过getParentNode方法获取node节点的父节点
var parent = $('#myTree').tree('getParentNode', node.target);
// 如果父节点存在，则递归查找所有兄弟节点以判断是否需要改变父节点选中状态
if(parent){
var siblings = $('#myTree').tree('getChildren', parent.target);
var allUnchecked = true;
for(var i=0; i<siblings.length; i++){
if(siblings[i].checked){
allUnchecked = false;
break;
}
}
if(allUnchecked){
$('#myTree').tree('uncheck', parent.target);
setParentNodeUncheck(parent);
}
}
}
}
});
function setParentNodeCheck(node){
// 通过getParentNode方法获取node节点的父节点
var parent = $('#myTree').tree('getParentNode', node.target);
// 如果父节点存在，则设置选中状态并递归查找父节点
if(parent){
$('#myTree').tree('check', parent.target);
setParentNodeCheck(parent);
}
}
function setParentNodeUncheck(node){
// 通过getParentNode方法获取node节点的父节点
var parent = $('#myTree').tree('getParentNode', node.target);
// 如果父节点存在，则设置取消选中状态并递归查找父节点
if(parent){
$('#myTree').tree('uncheck', parent.target);
setParentNodeUncheck(parent);
}
}
总结
使用jQuery EasyUI的tree组件可以方便地创建带复选框的树形菜单。通过设置checkbox属性为true就可以在节点前添加复选框，并通过onClick和onCheck事件来监听复选框的点击和选中状态改变的事件。在复选框选中状态改变时，可以通过递归遍历所有子节点以及父节点来联动所有相关节点的选中状态。