<script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="treeDemo" class="ztree">
</div>
</div>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [{
name: "test1",
open: true,
children: [
{ name: "test1_1" }, { name: "test1_2" }
] },
{
name: "test2",
open: true,
children: [
{ name: "test2_1" }, { name: "test2_2" }
] }
];
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</body>
</html>
三、一些方法
（1）设置展开树
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes); //展开所以节点
//zTreeObj.expandAll(true);
//展开第一级数节点
var nodes = zTreeObj.getNodesByParam("level", 0);
for(var i = 0; i < nodes.length; i++) {
zTreeObj.expandNode(nodes[i], true, false, false);
}
});
四、setting 配置详解
一些比较常用的配置
（一）check
1、enable: true
设置 zTree 的节点上是否显示 checkbox / radio
默认值: false
（二）view
selectedMulti: false 设置是否允许同时选中多个节点。默认是true
（三）data
simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: '0' } var zNodes = [{ "id": 1, "pid": 0, "name": "test1" },
{ "id": 11, "pid": 1, "name": "test11" },
{ "id": 12, "pid": 1, "name": "test12" },
{ "id": 111, "pid": 11, "name": "test111" }
];
效果：
