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

超级详细的Ztree详解超级详细的Ztree详解1、添加样式、js如果想要hideNodes、showNodes等⽅法，必须加⼊如果不需要那些hideNodes、showNodes等⽅法以只添加⼀个js，代替上⾯的三个js2、html设置⼀个div、ul，注意ul的class是固定的ztree

3、写js操作数据 1、setting配置详情var setting = { //显⽰ view: { selectedMulti: false, //在复制的时候，是否允许选中多个节点。true为⽀持，按下ctrl键⽣效，false不⽀持。 dblClickExpand: false, //双击的时候是否切换展开状态。true为切换，false不切换 fontCss: setFontCss_ztree //设置节点的颜⾊ }, //增删改，移动复制 edit: { enable: true, //如果enable为flase，那么树就不能移动了 showRemoveBtn: true, //是否显⽰树的删除按钮 showRenameBtn: true, //是否显⽰数的重命名按钮 isSimpleData : true, //数据是否采⽤简单 Array 格式，默认false treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性 treeNodeParentKey : "parentId",//在isSimpleData格式下，当前节点的⽗节点id属性 showLine : true, //是否显⽰节点间的连线 removeTitle: "删除节点",//删除Logo的提⽰ renameTitle: "编辑节点",//修改Logo的提⽰ //拖拽 drag: { isCopy: true,//能够复制 isMove: true,//能够移动 prev: false,//不能拖拽到节点前 next: false,//不能拖拽到节点后 inner: true//只能拖拽到节点中 } }, //异步 async: { enable: true, //开启异步加载 type:"get", url:h() + "/rest/treeCode/showZtreeSyncRest", contentType:"application/json", autoParam: ["id"], //异步加载数据，⾃动添加id参数，会⾃动获取当前节点的id值 dataFilter:filter, //过滤，跟easy-ui中的loadFilter⽅法⼀样。 otherParam: { "id":"1", "code_name":"固⽹测试"}//提交的时候就会提交参数id=1&code_name=固⽹测试 }, }, data:{ key:{ name:"codeName" //节点显⽰的值 }, // simpleData:{ enable:true,//如果为true，可以直接把从数据库中得到的List集合⾃动转换为Array格式。⽽不必转换为json传递 idKey:"id",//节点的id pIdKey:"parentId",//节点的⽗节点id rootPId:null } }, //回调函数 callback: { beforeDrag: beforeDrag,//拖拽之前 beforeDrop: beforeDrop,//拖拽结束 onDrop: zTreeOnDrop,//拖拽结束后 //onDrag: zTreeOnDrag,//拖拽的时候 beforeRemove: zTreeBeforeRemove,//删除节点前 onRemove: zTreeOnRemove,//节点删除之后 beforeEditName: zTreeBeforeEditName,//进⾏编辑之前 //beforeRename: zTreeBeforeRename,//重命名节点之前 //onRename: zTreeOnRename,//重命名之后 onClick: zTreeOnClick,//点击 onRightClick: zTreeOnRightClick,//右键 onAsyncSuccess: zTreeOnAsyncSuccess//异步加载 //beforeExpand: beforeExpand,//展开节点前 //onAsyncSuccess: onAsyncSuccess,//异步数据加载成功的回调 //onAsyncError: onAsyncError //异步数据加载错误后回调 } };2、zTree回调⽅法 //对得到的json数据进⾏过滤，加载树的时候执⾏ function filter(treeId, parentNode, responseData) { var contents = (t)?t:responseData; //当第⼀次加载的时候只显⽰⼀级节点，但是要让别⼈知道对应⼀级节点下是否有数据，那么就需要设置isParent,为true可以展开，下⾯有数据。 //我这⾥是由于异步加载数据，只加载根节点以及⼀级节点。那么⼀级节点下还有⼦节点，所以设置isParent显⽰还有⼦节点的效果 if( >0){ for(var i= 0 ; i <;i++){ //是否是叶⼦节点 var isParent = contents[i].isParent; if(isParent == false){ isParent = true; }else{ isParent = false; } contents[i].isParent = isParent; } } return contents; }; //节点异步加载完成后显⽰形状 //加载树的默认显⽰根节点，以及⼀级节点，每次异步加载数据都会执⾏这个⽅法，也就是有请求都会异步 function zTreeOnAsyncSuccess(event, treeId, msg) { try { var treeObj = $.eeObj("busTree"); //获取所有节点 var nodes = treeObj .getNodes(); for(var i = 0;i<;i++){ //展开⼀级节点 treeObj .expandNode(nodes[i], true); } } catch (err) { ror("数据异常", err); } } } //设置⼀个标识，是为了解决点击的时候，执⾏异步。显⽰所有的以及节点，以及⼀级节点下的所有节点 /* var firstAsyncSuccessFlag = 0; function zTreeOnAsyncSuccess(event, treeId, msg) { if (firstAsyncSuccessFlag == 0 ) { try { var treeObj = $.eeObj("busTree"); var selectedNode = ectedNodes(); //获取整个json节点 var nodes = es(); //展开根节点下的第⼀个节点 Node(nodes[0], true); //把根节点下的所有节点转换为数组 var childNodes = ormToArray(nodes[0]); //展开根节点下的第⼀个节点的第⼀节节点 treeObj .expandNode(childNodes[1], true); //选中根节点下的第⼀个节点 treeObj .selectNode(childNodes[1]); firstAsyncSuccessFlag = 1; } catch (err) { ror("数据异常", err); } } }*/ //初始化树 zTree = $.($("#busTree"), setting); //获取树 var treeObj = $.eeObj("busTree"); //异步刷新整个树，不推荐使⽤ cChildNodes(null, "refresh"); //新增的时候局部刷新，刷新⼦节点 cChildNodes(ectedNodes().childNodes,"refresh"); //修改的节点的时候，更改节点信息 //1、设置节点值 ectedNodes()[0].codeName = $("#treeRootCodeName").val(); ectedNodes()[0].codeValue = $("#treeRootCodeValue").val(); edNodes()[0].remark = $("#treeRootRemark").val(); //2、更新节点信息 Node(ectedNodes()[0]); //搜索功能： 1、根据查询的结果，显⽰对应树形结构。注意这⾥只能是对应查找⼏级节点的信息，还有待优化。 //根据code_name模糊查询 function searchByValue(){ var zTree = $.eeObj("treeDemo"); //经过transformToArray转换后是⼀个Array数组，数组⾥的每个元素都是object对象，这个对象⾥包含了node的21个属性。 var nodes = ormToArray(es()[0].children); var key=$("#codeName").val(); //空格回车符 不做查询 直接显⽰全部 if(/^s*$/.test(key)){ //updateNodes(false); des(nodes); return; } //⾸先隐藏 des(nodes); var nodeList=esByParamFuzzy("CODE_NAME", key); //模糊匹配 //把得到的节点放到filterNodes临时数组中 var filterNodes=[]; for(var i=0;i<;i++){ //这⾥只能是级别是2的 if(nodeList[i].level==2) { (nodeList[i]); } 注意：如果你是异步只加载了根节点和⼀级节点，那么增删改的时候，得到的异步结果，会获取不到该节点的⼦节点，只有zTreeOnAsyncSuccess⽅法执⾏完后，才 } } //显⽰ des(filterNodes); //取得每⼀个节点的⽗节点，进⾏展⽰ for(var i=0;i<;i++){ //主要是找不到⽗节点的问题 var parentNode = filterNodes[i].getParentNode(); //展开当前节点的⽗节点下的所有节点 Node(parentNode, true, false, false); //显⽰所有⽗节点 de(parentNode);

} } 2、搜索变⾊功能，但是会显⽰全部信息，查询到的结果会显⽰不同的颜⾊ //展开所有节点 function expand_ztree(treeId){ var treeObj = $.eeObj(treeId); All(true); } //节点没有⽗节点，展开，有⽗节点隐藏 function close_ztree(treeId){ var treeObj = $.eeObj(treeId); var nodes = ormToArray(es()); var nodeLength = ; for (var i = 0; i < nodeLength; i++) { if (nodes[i].PARENT_ID == null) { //根节点：展开 Node(nodes[i], true, true, false); } else { //⾮根节点：收起 Node(nodes[i], false, true, false); } } } //查询的onclick时间 function searchByValue(){ searchByFlag_ztree("treeDemo","codeName"); } //得到查询结果，并进⾏设置样式和展开 function searchByFlag_ztree(treeId, searchConditionId){ //<1>.搜索条件 var searchCondition = $('#' + searchConditionId).val(); //<2>.得到模糊匹配搜索条件的节点数组集合 var highlightNodes = new Array(); if (searchCondition != "") { var treeObj = $.eeObj(treeId); //模糊查询 highlightNodes = esByParamFuzzy("CODE_NAME", searchCondition, null); } //<3>.⾼亮显⽰并展⽰【指定节点】 highlightAndExpand_ztree(treeId, highlightNodes); } //展开，并显⽰不同颜⾊ function highlightAndExpand_ztree(treeId, highlightNodes){ var treeObj = $.eeObj(treeId); //<1>. 先把全部节点更新为普通样式 var treeNodes = ormToArray(es()); var nodes = ormToArray(es()[0].children); for (var i = 0; i < ; i++) { treeNodes[i].highlight = false; Node(treeNodes[i]); } //<2>.收起树, 只展开根节点下的⼀级节点 close_ztree(treeId); //<3>.把指定节点的样式更新为⾼亮显⽰，并展开 //<3>.把指定节点的样式更新为⾼亮显⽰，并展开 if (highlightNodes != null) { for (var i = 0; i < ; i++) { //⾼亮显⽰节点，并展开 highlightNodes[i].highlight = true; Node(highlightNodes[i]); //⾼亮显⽰节点的⽗节点的⽗节点....直到根节点，并展⽰ var parentNode = highlightNodes[i].getParentNode(); var parentNodes = getParentNodes_ztree(treeId, parentNode); //展开 Node(parentNodes, true, false, true); Node(parentNode, true, false, true); //设置颜⾊ setFontCss_ztree("",highlightNodes[i]); } } } //递归查找⽗节点 function getParentNodes_ztree(treeId, node){ if (node != null) { var treeObj = $.eeObj(treeId); var parentNode = entNode(); return getParentNodes_ztree(treeId, parentNode); } else { return node; } } //设置颜⾊ function setFontCss_ztree(treeId, treeNode) { if (_ID == null) { //根节点 return {color:"#333", "font-weight":"bold"}; } else if (nt == false){ //叶⼦节点 return (!!ght) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"}; } else { //⽗节点 return (!!ght) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; } } //点击的时候判断节点有没有数据，以便于datadrid是否请求后台刷新 if(nt){ datagrid刷新 }else{ 提⽰ } //获取过滤之外的所有数据 var filterNodes = esByFilter(filters); function filters(node) { return (ght == true); } //获取过滤的所有数据 esByParamFuzzy("CODE_NAME", searchCondition, null); //当焦点放在节点上显⽰新增Logo function addHoverDom(treeId, treeNode) { var sObj = $("#" + + "_span"); if (meFlag || $("#addBtn_"+).length>0) return; var addStr = ""; (addStr); var btn = $("#addBtn_"+); if (btn) ("click", function(){ //弹出easy-ui新增对话框 eDialog(); return false; }); }); }; //当⿏标不在节点的时候，⾃动隐藏新增按钮 function removeHoverDom(treeId, treeNode) { $("#addBtn_"+).unbind().remove(); }; //获取某个节点下的所有节点 //需求：当只能在叶⼦节点上添加数据的时候，但是展现的时候，需要如果点击叶⼦节点显⽰叶⼦节点的数据，点击节点显⽰该节点下的所有叶⼦节点的信息。 //注意：这⾥数据⽤，区分id，是为了去后台进⾏in查询 function getAllChildNodes(treeNode) { var treeObj = $.eeObj("sheetTree");//获取ztree var childNodes = ormToArray(treeNode);//把该节点的下的所有数据转换为数组 var nodes = new Array(); var j = 0; for(i = 0; i < ; i++) { //只有保存叶⼦节点的数据 if(!childNodes[i].isParent){ nodes[j] = childNodes[i].id; //(","); j++; } } return nodes; } //获取该节点下的所有⼦节点 getChildNodes:function(treeNode,result){ if (nt) { var childrenNodes = en; if (childrenNodes) { for (var i = 0; i < ; i++) { result += ',' + childrenNodes[i].id; result = ldNodes(childrenNodes[i], result); } } } return result; } //刷新节点 function refreshNode(id) { var treeObj = $.eeObj("busTree"); var node = eByParam("id", id, null); if (node) { cChildNodes(node, "refresh"); } else { setTimeout(function() { refreshNode(id); }, 10); } } //刷新⽗节点 function refreshParentNode(id) { var treeObj = $.eeObj("busTree"); var node = eByParam("id", id, null); var pNode = entNode(); if (pNode) { refreshNode(); } else { refreshNode("0"); } }//删除根节点的时候，销毁整棵树$.y("busTree");//修改节点名，判断是否为空，或者超出限制function zTreeBeforeRename(treeId, treeNode, newName, isCancel) { if (>10||().length<=0) { if (>10||().length<=0) { ("填写信息不符合规则!"); var treeObj = $.eeObj("treeDemo"); EditName(); return false; } return true;}function zTreeOnRename(event, treeId, treeNodes, isCancel) { //真正触发的时候为undefiend。触发不成功的时候，为true if(isCancel == undefined){ //修改操作 }} //右键显⽰新增，修改，删除（与easy-ui整体类似） //右键，填出编辑框 function zTreeOnRightClick(event, treeId, treeNode) { var treeObj = $.eeObj("busTree"); //设置选中右键节点 Node(treeNode); //这⾥可以为为div添加click事件，进⾏新增，修改，删除操作。 注意：设置选中节点，才能去对应的操作⽅法中获取选中的⼏点 （var treeObj = $.eeObj("busTree"); var nodes = ectedNodes();） $('#configure-tree-menu').menu('show',{left: ,top: }); }; //删除节点的时候需要注意 //由于数据是异步加载的，所以不仅需要进⾏数据删除，还需要进⾏逻辑删除。否则数据没有及时的回显，那么树的状态isParent还没改变。 for (var i=0, l=; i < l; i++) { Node(nodes[i]); } //在onBeforeRemove中操作，异步的判断 //在数据操作成功之后 var treeObj = $.eeObj("busTree"); Node(treeNode); var nodes = ectedNodes(); for (var i=0, l=; i < l; i++) { Node(nodes[i]);//默认是false，如果设置为true,那么就会触发onRemove函数 } //html中的menu