**
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"} ];
**
$(function () {
var setting = {
view: {
showIcon: true,//设置 zTree 是否显示节点的图标。
selectedMulti : true, //可以多选
showLine : false,
expandSpeed : 'fast',
dblClickExpand : false
},
data: {
simpleData: {
enable: true
}
},
check : {
enable : true,
chkStyle : "checkbox", //复选框
},
callback: {
// beforeExpand: beforeExpand,
// onExpand: onExpand,
onClick: zTreeOnClick,
onCheck:zTreeonCheck,
onAsyncSuccess : zTreeOnAsyncSuccessPublic
}
}
```javascript
function zTreeOnClick(event, treeId, treeNode) {
// 每次点击节点后, 弹出该节点的 tId、name 的信息
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)
// alert(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>
var zNodes=[];
$.ajax({
type:'get',
url:'getMenu',
dataType:'json',
success:function (data) {
// console.log(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自带的方法,表示回显选中的复选框。
**
**