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:表示使树形结构使用复选框ztree--ztree树形结构显示数据+复选框+回显勾选选中值_第1张图片
callback:表示执行后的回调函数,onClick表示点击时获取该节点的id和name的值,onCheck表示点击复选框的时候获取该节点的id和name的值,onAsyncSuccess表示请求成功后的回调函数,但是,需要注意的是,如果你使用了ajax,那么请求都会先让ajax执行,这样的话就不会执行onAsyncSuccess了,所以有两种解决办法,一是:把onAsyncSuccess中的方法直接放到ajax中去执行;二是:不用ajax,直接用onAsyncSuccess,把ajax中的方法放到onAsyncSuccess中执行,前提是ajax中的方法是针对ztree树的,要不然没有用
ztree--ztree树形结构显示数据+复选框+回显勾选选中值_第2张图片
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自带的方法,表示回显选中的复选框。
ztree--ztree树形结构显示数据+复选框+回显勾选选中值_第3张图片
**

4.页面中需要引入ztree的css和js

**

你可能感兴趣的:(ztree,前端,js,javascript)