ztree--ztree树形结构显示数据+复选框+回显勾选选中值

**

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,//设置 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>

**

3.回显勾选选中（在ajax中实现）

  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自带的方法，表示回显选中的复选框。

**

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>