Ztree
是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的Web显示、权限管理等等.
1.导入Ztree组件
<link rel="stylesheet" type="text/css"
href="plugins/ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript"
src="plugins/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
src="plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript"
src="plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>
2.属性介绍
2.1构建ztree的json数据格式
**标准的json数据格式: **
//标准的json数据结构
var zNodes = [
{name:"test1", children:[{name:"test1_1"}, {name:"test1_2",
children:[{name:"test1_2_1"},{name:"test1_2_2"}]}]},
{name:"test2", children:[{name:"test2_1"}, {name:"test2_2"}]}
];
**简单的json结构: **
var zNodes=[
{id:"1",name:"test1",pId:"0"},
{id:"2",name:"test2",pId:"0"},
{id:"11",name:"test1_1",pId:"1"},
{id:"12",name:"test1_2",pId:"1"},
{id:"21",name:"test2_1",pId:"2"},
{id:"22",name:"test2_2",pId:"2",checked:true},
{id:"121",name:"test1_2_1",pId:"12"}
]
2.2 setting设置
var setting = {
data: {
simpleData: {
enable: true, //开启了简单的json结构
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
check: {
enable: true //开启了树形节点上复选框
}
};
2.3初始化Ztree
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
2.4展开所有的树形节点
//展开树形节点
zTreeObj.expandAll(true);
2.5获取已勾选的数据节点
let checkedNodes = zTreeObj.getCheckedNodes(true);