插件介绍：ztree （备忘）

迈不过友情╰ 2022-07-13 15:51 172阅读 0赞

1.  引入文件:  
    jquery  
    例如:jquery-2.1.4.min.js  
    ztree  
    例如:  
    jquery.ztree.all.min.js  
    jquery.ztree.core.js  
    jquery.ztree.exedit.js  
    jquery.ztree.excheck.js
2.  配置

var setting = {
              /* async: {
                   enable: true,//采用异步加载
                   url : "mvc/safeCheck/get-check-Project/",
                   autoParam: ["id"],//自动提交的参数，每次异步加载时都会附带该参数
                   type:"get",
                   dataType : "json"//返回json格式的数据
    
                   },*/
               view: {
                   addHoverDom:  addHoverDom,//api查询该方法
                   removeHoverDom: removeHoverDom,  //
                   expandSpeed: "slow", //tree展示的速度
                   showIcon: true,      //展示图标
                   selectedMulti: false,//允许多选
    
               },
               edit: {
       //编辑相关
                   enable: true,
                   showRemoveBtn: setRemoveBtn, //展示删除按钮
                   showRenameBtn: true,         //展示重命名按钮
                   removeTitle: "删除节点",     //按钮的名称
                   renameTitle: "重命名"
               },
               data: {
                   simpleData: {
                       enable: true
                   }
               },
               check: {
       //复选框
                   enable: false, //是否启用
                   chkStyle: "checkbox",//类型
                   chkboxType: { "Y": "", "N": "" } //父类及子类是否受节点展开或关闭影响.
               },
               callback: {
       //回调方法相关
                   onCheck: false,
                   beforeRename: zTreeBeforeRename, //重命名前执行的方法
                   beforeRemove: zTreeBeforeRemove,
                   onClick: zTreeOnClick,           //单击tree时的方法
               }
           };

3 初始化

比如一个按钮绑定了data_edit()这个方法.
            //查看
            function data_edit(mid) { 
                // 节点数据
                var zNodes;
                $.get("mvc/safeCheck/get-check-Project/"+mid+"?"+Math.random(),function(resp){ 
                    zNodes = resp.data;
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化
                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //得到tree对象
                    var nodes = treeObj.getNodes();                 //得到所有节点.
                    if (nodes.length>0) {                           
                        treeObj.expandNode(nodes[0], true, false, false);   //展开一二级,具体看api中 expandNode用法 
                    }
                },"json");
                $("#userDepartModal").modal('show');
            }
            其中添加按钮没有提供,但是可以自己加
             function addHoverDom(treeId, treeNode) { 
              var sObj = $("#" + treeNode.tId + "_span");
               if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
               var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                       + "' title='新增子项' onfocus='this.blur();'></span>";
               sObj.after(addStr);
               var btn = $("#addBtn_"+treeNode.tId);
               if (btn) btn.bind("click", function(){ 
                        alert("***");
               });
               }

再介绍几个我常用的方法,  
getNodeByTId() 根据id获得节点  
updateNode() 更新节点  
getCheckedNodes() 得到被勾选的节点

更具体要查看api了,ztree 是中国人写的,aip好懂,为他点赞,人活着不能只为了钱,要活的坦荡,上进,穷则独善其身,达则兼济天下.

自己的代码备忘:

// ztree相关
           var setting = {
              /* async: { enable: true,//采用异步加载 url : "mvc/safeCheck/get-check-Project/", autoParam: ["id"],//自动提交的参数，每次异步加载时都会附带该参数 type:"get", dataType : "json"//返回json格式的数据 },*/
               view: {
                   addHoverDom:  addHoverDom,
                   removeHoverDom: removeHoverDom,
                   expandSpeed: "slow",
                   showIcon: true,
                   selectedMulti: false,
    
               },
               edit: {
                   enable: true,
                   showRemoveBtn: setRemoveBtn,
                   showRenameBtn: true,
                   removeTitle: "删除节点",
                   renameTitle: "重命名"
               },
               data: {
                   simpleData: {
                       enable: true
                   }
               },
               check: {
                   enable: false,
                   chkStyle: "checkbox",
                   chkboxType: { "Y": "", "N": "" }
               },
               callback: {
                   onCheck: false,
                   beforeRename: zTreeBeforeRename,
                   beforeRemove: zTreeBeforeRemove,
                   onClick: zTreeOnClick,
               }
           };
    
           //查看
            function data_edit(mid) { 
                // 节点数据
                var zNodes;
                $.get("mvc/safeCheck/get-check-Project/"+mid+"?"+Math.random(),function(resp){ 
                    zNodes = resp.data;
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                    var nodes = treeObj.getNodes();
                    if (nodes.length>0) {
                        treeObj.expandNode(nodes[0], true, false, false);
                    }
                },"json");
                $("#userDepartModal").modal('show');
            }
    
           var newCount = 1;
           function addHoverDom(treeId, treeNode) { 
    
               //第四级不显示添加按钮
               var level = treeNode.level+1;
               if (level == 4) {
                   return false;
               }
               var sObj = $("#" + treeNode.tId + "_span");
               if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
               var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                       + "' title='新增子项' onfocus='this.blur();'></span>";
               sObj.after(addStr);
               var btn = $("#addBtn_"+treeNode.tId);
               if (btn) btn.bind("click", function(){ 
                   var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                   //获取服务器新增的数据
                   $.post("mvc/safeCheck/add-new-project" + "?" + Math.random(),
                           {pid: treeNode.id, level: treeNode.level},
                           function (resp) { 
                               if (!resp.succ) {
                                   alert("数据异常,请联系管理员！");
                                   return true;
                               }else {
                                   var  node = resp.project;
                                   zTree.addNodes(treeNode, {id: node.id, pId:treeNode.id, name:"新增项" + (newCount++)});
                               }
                           }, "json");
               });
           };
    
    
    
    
           function removeHoverDom(treeId, treeNode) { 
               $("#addBtn_"+treeNode.tId).unbind().remove();
           };
            //修改节点名称
           function zTreeBeforeRename(treeId, treeNode, newName) { 
    
               $.post("mvc/safeCheck/edit-Project",{id:treeNode.id,name:newName,level:treeNode.level},function(resp){ 
                   if(resp.succ) {
                       alert("修改完成!")
                   }
               },"json");
           }
    
           //根节点不显示删除按钮
           function setRemoveBtn(treeId, treeNode) { 
    
               if(treeNode.level == 0) {
       //根节点不能删除
                   return !treeNode;
               }else {
                   return true;
               }
           }
           //删除前回掉函数
           function zTreeBeforeRemove(treeId, treeNode) { 
    
               if(confirm("确定删除？")) {
    
                   $.post("mvc/safeCheck/delete-Project" + "?" + Math.random(),
                           {id: treeNode.id, level: treeNode.level},
                           function (resp) { 
                               if (resp.succ) {
                                   alert("删除成功！");
                                   return true;
                               }
                           }, "json");
                   return true;
               }else {
                   return false;
               }
           }
    
            //单击节点事件(第四级)
           function zTreeOnClick(event, treeId, treeNode) { 
    
             /* var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getSelectedNodes(); if (nodes.length>0) { treeObj.reAsyncChildNodes(nodes[0], "refresh",false); } var treeNode = treeObj.getSelectedNodes()[0];*/
               //清空表单
               fauFormClear("#edit-subProject-form");
               $("#ztreeId").val(treeNode.tId);
               var level = treeNode.level + 1;
               if(level == 4) {
    
                   $("#valueDiv").css('display','none');
                   $("#subId").val(treeNode.id);
                   $("#projectContent").val(treeNode.name);
                   if(treeNode.value) {
                       $("#valueDiv").css('display','block');
                       $("#typeProject").val(2);
                       $("#valueProject").val(treeNode.value);
                   }else {
                       $("#typeProject").val(1);
                   }
                   //change事件
                   $("#typeProject").change(function () { 
                       var flag = $(this).val();
                       if (flag == 1) {
                           $("#valueDiv").css('display','none');
                       }else {
                           $("#valueDiv").css('display','block');
                       }
                   });
    
                   $("#subProjectModal").modal('show');
               }
    
           };
    
           //编辑子项
            function editSubProject() { 
    
                //更新ztree
                var value = $("#valueProject").val();
                var tid = $("#ztreeId").val();
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                var node = treeObj.getNodeByTId(tid);
                node.value=value;
                treeObj.updateNode(node);
                var subId =  $("#subId").val();
                //后台
                $.post("mvc/safeCheck/edit-sub-project" + "?" + Math.random(),
                        {id: subId, value: value},
                        function (resp) { 
                            if (resp.succ) {
                                alert("修改完成!");
                                $("#subProjectModal").modal('hide');
                            }
                        }, "json");
            }
    
            -------------------------------------------------------------------------------------
            --------------------------------------------------------------------------------------
                // ztree相关
            var setting = {
                /* async: { enable: true,//采用异步加载 url : "mvc/safeCheck/get-check-Project/", autoParam: ["id"],//自动提交的参数，每次异步加载时都会附带该参数 type:"get", dataType : "json"//返回json格式的数据 },*/
                view: {
                    addHoverDom:  false,
                    removeHoverDom: false,
                    expandSpeed: "slow",
                    showIcon: true,
                    selectedMulti: false,
    
                },
                edit: {
                    enable: false,
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                check: {
                    enable: true,
                    chkStyle: "checkbox",
                    chkboxType: { "Y": "ps", "N": "ps" }
                },
                callback: {
                    onCheck: false,
                    onClick: false,
                }
            };
    
         //保存 获取当前被勾选的节点集合
        function save_projec() { 
    
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            if (treeObj) {
                var nodes = treeObj.getCheckedNodes(true);
                var nodeArr = new Array();
                $.each(nodes, function (index,item) { 
                    var node = new Object();
                    node.name = item.name;
                    node.levelType = item.level+1;
                    node.value = item.value;
                    nodeArr.push(node);
                });
                var nodeJson = JSON.stringify(nodeArr);
                if (nodeJson != "[]"){
                    $("#nodes").val(nodeJson);
                }else {
                   alert("请选择模板!")
                    return false;
                }
            }
            $("#add-data-form").submit();
    
        }
    
           //查看
           function data_edit(mid) { 
               // 节点数据
               var zNodes;
               $.get("mvc/safeCheck/get-make-Project/"+mid+"?"+Math.random(),function(resp){ 
                   zNodes = resp.data;
                   setting.check.enable = false;
                   $.fn.zTree.init($("#treeDemoSee"), setting, zNodes);
                   var treeObj = $.fn.zTree.getZTreeObj("treeDemoSee");
                   var nodes = treeObj.getNodes();
                   if (nodes.length>0) {
                       treeObj.expandNode(nodes[0], true, false, false);
                   }
               },"json");
               $("#userDepartModal").modal('show');
           }

页面效果展示  
![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

[SouthEast]: /images/20220709/fed2cb1b51d54e27a5c0b473298e73aa.png
[SouthEast 1]: /images/20220709/7d10193c18484023a1c510277fea8a8f.png