jQuery Tree Multiselect - 美观易用的多选树形控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Tree Multiselect Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tree-multiselect/0.2.10/jquery.tree-multiselect.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tree-multiselect/0.2.10/jquery.tree-multiselect.min.js"></script>
</head>
<body>
<div id="tree"></div>
<script>
$(function() {
$('#tree').treeMultiselect({
// 配置选项
enableCollapsible: true, // 允许折叠
enableCheckboxToggle: true, // 允许复选框切换
checkboxInitialState: true, // 初始状态为选中
collapse: function() {
// 折叠时的回调函数
console.log('节点被折叠了');
},
expand: function() {
// 展开时的回调函数
console.log('节点被展开了');
}
});
// 初始化树
$('#tree').treeMultiselect({
data: [
{
label: '节点1',
children: [
{
label: '子节点1.1',
attributes: {
some_custom_attribute: 'some value'
}
},
{
label: '子节点1.2',
children: [
{
label: '子节点1.2.1'
}
]
}
]
},
{
label: '节点2',
state: {
checked: true, // 初始状态为选中
disabled: true, // 初始状态为禁用
expanded: true // 初始状态为展开
}
}
]
});
});
</script>
</body>
</html>这个代码示例展示了如何使用jQuery Tree Multiselect插件来创建一个多选树形控件，并提供了一些基本的配置选项和事件处理函数。同时，它也展示了如何初始化树形结构，并为每个节点设置自定义属性和初始状态。
评论已关闭