zTree--父节点根据子节点展开
使用时发现通过json加载数据，如果子节点全选父节点也不会自动选中。
查看Api文档，改造结果如下图
<!DOCTYPE html>
<html>
<head>
<title>ZTREE DEMO - Simple Data</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.42/css/metroStyle/metroStyle.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.42/js/jquery.ztree.core.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.42/js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript">
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false,
},
check: {
enable: true,
},
data: {
simpleData: {
enable: true,
},
},
edit: {
enable: true,
},
callback: {
onNodeCreated: function (event, treeId, treeNode) {
if (
(treeNode.isParent || treeNode.level == 0) &&
!treeNode.checked
) {
var childChecked = 0
for (var i = 0; i < treeNode.children.length; i++) {
if (treeNode.children[i].checked) childChecked++
}
if (childChecked == treeNode.children.length)
$.fn.zTree.getZTreeObj(treeId).checkNode(treeNode, true)
}
},
},
}
var zNodes = [
{ id: 1, pId: 0, name: '[core] 基本功能 演示', open: true },
{
id: 101,
pId: 1,
name: '最简单的树 -- 标准 JSON 数据',
checked: true,
},
{
id: 102,
pId: 1,
name: '最简单的树 -- 简单 JSON 数据',
checked: true,
},
{ id: 103, pId: 1, name: '不显示 连接线', checked: true },
{ id: 104, pId: 1, name: '不显示 节点 图标', checked: true },
{ id: 108, pId: 1, name: '异步加载 节点数据', checked: true },
{
id: 109,
pId: 1,
name: '用 zTree 方法 异步加载 节点数据',
checked: true,
},
{ id: 110, pId: 1, name: '用 zTree 方法 更新 节点数据', checked: true },
{ id: 111, pId: 1, name: '单击 节点 控制', checked: true },
{ id: 112, pId: 1, name: '展开 / 折叠 父节点 控制', checked: true },
{ id: 113, pId: 1, name: '根据 参数 查找 节点', checked: true },
{ id: 114, pId: 1, name: '其他 鼠标 事件监听', checked: true },
{ id: 2, pId: 0, name: '[excheck] 复/单选框功能 演示', open: true },
{ id: 201, pId: 2, name: 'Checkbox 勾选操作' },
{ id: 206, pId: 2, name: 'Checkbox nocheck 演示', checked: true },
{ id: 207, pId: 2, name: 'Checkbox chkDisabled 演示' },
{ id: 208, pId: 2, name: 'Checkbox halfCheck 演示' },
{ id: 202, pId: 2, name: 'Checkbox 勾选统计' },
{ id: 203, pId: 2, name: '用 zTree 方法 勾选 Checkbox' },
{ id: 204, pId: 2, name: 'Radio 勾选操作', checked: true },
{ id: 209, pId: 2, name: 'Radio nocheck 演示', checked: true },
{ id: 210, pId: 2, name: 'Radio chkDisabled 演示' },
{ id: 211, pId: 2, name: 'Radio halfCheck 演示' },
{ id: 205, pId: 2, name: '用 zTree 方法 勾选 Radio' },
{ id: 3, pId: 0, name: '[exedit] 编辑功能 演示', open: false },
{ id: 301, pId: 3, name: '拖拽 节点 基本控制' },
{ id: 302, pId: 3, name: '拖拽 节点 高级控制' },
{ id: 303, pId: 3, name: '用 zTree 方法 移动 / 复制 节点' },
{ id: 304, pId: 3, name: '基本 增 / 删 / 改 节点' },
{ id: 305, pId: 3, name: '高级 增 / 删 / 改 节点' },
{ id: 306, pId: 3, name: '用 zTree 方法 增 / 删 / 改 节点' },
{ id: 307, pId: 3, name: '异步加载 & 编辑功能 共存' },
{ id: 308, pId: 3, name: '多棵树之间 的 数据交互' },
{ id: 4, pId: 0, name: '大数据量 演示', open: true },
{ id: 401, pId: 4, name: '一次性加载大数据量', checked: true },
{ id: 402, pId: 4, name: '分批异步加载大数据量', checked: true },
{ id: 403, pId: 4, name: '分批异步加载大数据量', checked: true },
{ id: 5, pId: 0, name: '组合功能 演示', open: false },
{ id: 501, pId: 5, name: '冻结根节点' },
{ id: 502, pId: 5, name: '单击展开/折叠节点' },
{ id: 503, pId: 5, name: '保持展开单一路径' },
{ id: 504, pId: 5, name: '添加 自定义控件' },
{ id: 505, pId: 5, name: 'checkbox / radio 共存' },
{ id: 506, pId: 5, name: '左侧菜单' },
{ id: 507, pId: 5, name: '下拉菜单' },
{ id: 509, pId: 5, name: '带 checkbox 的多选下拉菜单' },
{ id: 510, pId: 5, name: '带 radio 的单选下拉菜单' },
{ id: 508, pId: 5, name: '右键菜单 的 实现' },
{ id: 511, pId: 5, name: '与其他 DOM 拖拽互动' },
{ id: 512, pId: 5, name: '异步加载模式下全部展开' },
{ id: 6, pId: 0, name: '其他扩展功能 演示', open: false },
{ id: 601, pId: 6, name: '隐藏普通节点' },
{ id: 602, pId: 6, name: '配合 checkbox 的隐藏' },
{ id: 603, pId: 6, name: '配合 radio 的隐藏' },
]
$(document).ready(function () {
$.fn.zTree.init($('#treeDemo'), setting, zNodes)
})
var newCount = 1
function addHoverDom(treeId, treeNode) {
var sObj = $('#' + treeNode.tId + '_span')
if (treeNode.editNameFlag || $('#addBtn_' + treeNode.tId).length > 0)
return
var addStr =
"<span class='button add' id='addBtn_" +
treeNode.tId +
"' title='add node' onfocus='this.blur();'></span>"
sObj.after(addStr)
var btn = $('#addBtn_' + treeNode.tId)
if (btn)
btn.bind('click', function () {
var zTree = $.fn.zTree.getZTreeObj('treeDemo')
zTree.addNodes(treeNode, {
id: 100 + newCount,
pId: treeNode.id,
name: 'new node' + newCount++,
})
return false
})
}
function removeHoverDom(treeId, treeNode) {
$('#addBtn_' + treeNode.tId)
.unbind()
.remove()
}
</script>
</head>
<body>
<h1>zTree</h1>
<ul id="treeDemo" class="ztree"></ul>
</body>
</html>