**
1.ztree后台接口数据格式
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"} ];
**
2.ztree前端页面使用
$(function () {
var setting
= {
view
: {
showIcon
: true,
selectedMulti
: true,
showLine
: false,
expandSpeed
: 'fast',
dblClickExpand
: false
},
data
: {
simpleData
: {
enable
: true
}
},
check
: {
enable
: true,
chkStyle
: "checkbox",
},
callback
: {
onClick
: zTreeOnClick
,
onCheck
:zTreeonCheck
,
onAsyncSuccess
: zTreeOnAsyncSuccessPublic
}
}
```javascript
function zTreeOnClick(event
, treeId
, treeNode
) {
alert(treeNode
.tId
+ ", " + treeNode
.name
);
};
function zTreeonCheck() {
var treeObj
=$
.fn
.zTree
.getZTreeObj("planTree"),
nodes
=treeObj
.getChangeCheckedNodes();
var arr
=[];
for(var i
=0;i
<nodes
.length
;i
++){
arr
.push(nodes
[i
].id
)
}
$("#nodeid").val(arr
);
}
})
**注意：check：表示使树形结构使用复选框 callback:表示执行后的回调函数，onClick表示点击时获取该节点的id和name的值，onCheck表示点击复选框的时候获取该节点的id和name的值，onAsyncSuccess表示请求成功后的回调函数，但是，需要注意的是，如果你使用了ajax，那么请求都会先让ajax执行，这样的话就不会执行onAsyncSuccess了，所以有两种解决办法，一是：把onAsyncSuccess中的方法直接放到ajax中去执行；二是：不用ajax，直接用onAsyncSuccess，把ajax中的方法放到onAsyncSuccess中执行，前提是ajax中的方法是针对ztree树的，要不然没有用 nodeid:表示input隐藏域的id,此隐藏域的作用是存放选中的节点的id(复选框对应的id) planTree:表示存放树形结构的div，不管用什么标签，一定要加class=“ztree”，要不然树形结构会出现显示不出来的情况。 getZTreeObj():此方法是ztree自带的方法，表示获取初始化的树对象。 getChangeCheckedNodes():此方法是ztree自带的方法，表示获取复选框选中节点。
<div
class="layui-input-block">
<div
class="demo-tree-more">
<ul id
="planTree" class="ztree"></ul
>
</div
>
</div
>
**
3.回显勾选选中（在ajax中实现）
var zNodes
=[];
$
.ajax({
type
:'get',
url
:'getMenu',
dataType
:'json',
success
:function (data
) {
zNodes
=data
;
$
.fn
.zTree
.init($("#planTree"), setting
, zNodes
);
var ztreeIds
= $("#nodeid").val();
if(ztreeIds
.trim()!=""){
var ztree
= $
.fn
.zTree
.getZTreeObj("planTree");
var ztreeId
= ztreeIds
.split(",");
for(var j
=0;j
<ztreeId
.length
;j
++){
var node
= ztree
.getNodeByParam("id",ztreeId
[j
]);
var parent
= node
.getParentNode();
if(parent
==null||!parent
.open
){
ztree
.expandNode(parent
,true,true);
}
ztree
.checkNode(node
,true,true);
}
}
}
})
**注意： getNodesByParam():此方法是ztree自带的方法，表示通过id获取节点信息，这里的id是（id，parentid,name）中的id，不是父id。 getParentNode():此方法是ztree自带的方法，表示获取父级id,这个时候parent有可能是null,所以要加为null判断。 expandNode():此方法是ztree自带的方法，表示展开是否展开父级id。 checjNode():此方法是ztree自带的方法，表示回显选中的复选框。 **
4.页面中需要引入ztree的css和js
**<link rel="stylesheet" href="ztree/css/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="ztree/jquery.ztree.all.js"></script>
