Ztree树状的处理

1.用一个div进行包裹ztree结构，引用相关的js代码和css样式，这里用的样式是awesome.css

所引用的js文件，css文件可以在网上下载（这里所用到的jquery-ztree文件放在网盘了）

2.对ztree进行结构处理

  2.1 在对页面进行初始化操作的时候会进行获取数据，对获取数据后进行处理初始化树状

 2.2 初始化内容内部的处理initTree(false,addDiyDom)

//获取数据后会调用的方法
function initTree(enableCheck, addDiyDom) {
        var zNodes = initNodes();//初始化节点
        //设置树状基本的配置
        var setting = {
            check: {
                enable: enableCheck,
                chkStyle: "checkbox"
            },
            data: {
                key: {
                    checked: "IsChecked",
                    name: "Name",
                    children: "Children",
                    isParent: "IsParent",
                    type: "Type",
                    level: "Level"
                },
                simpleData: {
                    enable: true,
                    idKey: "Id"
                }
            },
            callback: {
                beforeClick: zTreeBeforeClick,//点击判断是否操作点击事件
                onClick: zTreeOnClick  //如果beforeClick里的方法事件返回为true，
                                       //则会回调此方法
            },
            view: {
                addDiyDom: addDiyDom,//视图展示的自定义内容
                fontCss: setFontCss  //节点字体颜色的设置
            },
            edit: {
               //此处可以设置操作增删改节点，
               //但是如果在自己自定义addDiyDom就可以不需要在此处的设置了
            }
        };
        
        //初始化
        treeObj = $.fn.zTree.init($("#tree_mat"), setting, zNodes);
        treeObj.expandAll(true);//节点全部展开
    }

2.3 在初始化树状方法initTree内需要进行处理的方法

       2.3.1 addDiyDom视图展示 的自定义内容（在获取数据的后调用的初始化的时候会作为参数，  上面有出现）

       initTree(false, addDiyDom);

      内容可以根据具体情况具体添加

//这个方法的两个参数是固定的
 function addDiyDom(treeId, treeNode) {
        var aObj = $("#" + treeNode.tId + "_a");
//节点名称后面对应的相关操作（一般会设置成图标，进行点击到对应的事件进行对应处理）     
        var editStr = "";
        editStr = editStr + ""
            + "";
        aObj.append(editStr);
    };

      图标的效果大致如此，鼠标放上去会显示对应的标题

       2.3.2  initNodes初始化节点

     

function initNodes() {
        //根节点，这组数据是最上的根节点，数据的字段根据具体情况具体添加，
        //跟获取数据localStorage.getItem("dataTree")的结构字段保持一致
        var rootNode = new Object();
        rootNode.Id = 0;//id
        rootNode.Name = "根节点";//名称
        rootNode.Level = 0;//层级
        rootNode.Type = "";//类型MatGroup站点群组,Mat站点,Site安装位置
        rootNode.IsParent = true;//是否为父级
        rootNode.IsChecked = false;
        rootNode.ParentId = 0;
        rootNode.ParentName = "";
        rootNode.ParentType = "";
        rootNode.Status = "";
        rootNode.SuperiorStatus = "";
        rootNode.Children = [];
        //获取在初始化ajax处得到的数据（2.1处有说明）
        var dataInfoTree = JSON.parse(localStorage.getItem("dataTree"));
        if (dataInfoTree == null) {
            return rootNode;
        }
        rootNode.Children = dataInfoTree;//将数据放在根节点的子节点中
        return rootNode
    }

       2.3.3  setFontCss节点字体颜色设置

//设置字体颜色 具体情况具体判断设置
    function setFontCss(treeId, treeNode) {
        return treeNode.Status == "12" || treeNode.Status == "32" ? { color: "red" } : {};
    };

       2.3.4 zTreeBeforeClick（beforeClick）点击判断是否操作点击事件，返回为true则触发点击事件
                zTreeOnClick（onClick）这两个方法是连贯性的，所以一起说明

//点击判断是否操作点击事件，具体情况具体分析
    function zTreeBeforeClick(treeId, treeNode, clickFlag) {
        return (treeNode.id !== 0 && isClickIcon == false);
    };
    //zTreeBeforeClick为true，回调此方法
    function zTreeOnClick(event, treeId, treeNode) {
        //显示右边区域
        var url = "";//页面地址
       
        $("#frame").attr("src", url);//因为这块做的例子是将树状点击后的触发的是展示对应页面，
        //页面对应的地址放在frame框架内，所以在此处会给frame提供路径
    };

ztree还有很多的其他的功能处理，我这边有的还没用上，后续若用上了会进行补充

参考地址：https://treejs.cn/v3/api.php