带有复选框的树形结构(jstree,ztree)
jstree
效果：
代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree testtitle>
<script src="../jquery-1.12.4.min.js">script>
<link rel="stylesheet" href="./dist/themes/default/style.min.css" />
head>
<body>
<div id="jstree">
<ul>
<li id="node_1">根节点 1
<ul>
<li id="child_node_1">子节点1li>
<li id="child_node_2">子节点2li>
ul>
li>
<li>根节点 2li>
ul>
div>
<button>演示按钮button>
<script src="./dist/jstree.min.js">script>
<script>
$(function () {
// 6 当DOM准备好时创建一个实例
$('#jstree').jstree({
"checkbox": {
"keep_selected_style": false
},
"plugins": ["checkbox"]
});
// 7 绑定到树上触发的事件
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 与树交互-任何一种方式都可以
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
script>
body>
html>
官网：http://www.jstree.com.cn/
ztree
官网：https://treejs.cn/v3/main.php#_zTreeInfo