2023年6月22日发(作者：)

ztree--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"} ];**前端页⾯使⽤ $(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 } }```javascriptfunction zTreeOnClick(event, treeId, treeNode) { //

每次点击节点后，

弹出该节点的 tId、name

的信息 alert( + ", " + ); };function zTreeonCheck() { var treeObj=$.eeObj("planTree"), nodes=ngeCheckedNodes(); var arr=[]; for(var i=0;i<;i++){ (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⾃带的⽅法，表⽰获取复选框选中节点。

**3.回显勾选选中（在ajax中实现） var zNodes=[]; $.ajax({ type:'get', url:'getMenu', dataType:'json', success:function (data) { // (data) zNodes=data; $.($("#planTree"), setting, zNodes); var ztreeIds = $("#nodeid").val(); if(()!=""){ var ztree = $.eeObj("planTree"); var ztreeId = (","); for(var j=0;j<;j++){ var node = eByParam("id",ztreeId[j]); var parent = entNode(); if(parent==null||!){ Node(parent,true,true); } ode(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**