概述

将ztree扩展标准的layui控件调用方式

定义方式

采用原型的方式定义类
使用类的实例化来输出最终对象

步骤

• 定义树的json数组
• 定义默认参数，并根据外部参数进行参数合并
• 使用render来渲染树
• 对树json数组来进行操作，增加节点，删除节点，更新节点
• 对外输出树数据json

代码

layui.define(["jquery", "laytpl", "layer"], function (exports) {
    //全局定义
    var $ = layui.jquery;
    //定义一个类
    function adfZtree(config) {
        this.config = config;
        var self = this;
        this.treeId = config.elemId.replace("#", "");
        //内部标准方法
        function beforeDrag(treeId, treeNodes) {
                for (var i = 0, l = treeNodes.length; i < l; i++) {
                    if (treeNodes[i].drag === false) {
                        return false;
                    }
                }
                return true;
            }
            function beforeDrop(treeId, treeNodes, targetNode, moveType) {
                return targetNode ? targetNode.drop !== false : true;
        }
            function beforeRemove(treeId, treeNode) {
                if ( typeof(treeNode.children) !== "undefined" && treeNode.children.length !== 0) {
                    layer.msg("存在子节点不能删除");
                    return false;
                }
                //从数据中删除以idKey为核心的值
                var idKey = self.config.idKey;
                var curData = self.config.data.find(x => x[idKey] === treeNode[idKey]);
                if (typeof(curData) !== "undefined") {
                    self.config.data.splice(curData, 1);
                }
                return true;
            }
        //基础定义
        this.treeSetting = {
            view: {
                expandSpeed: "",
                selectedMulti: false
            },
            edit: {
                enable: true,
                showRemoveBtn: true,
                showRenameBtn: true
            },
            data: {
                key: {
                    name:"name"
                },
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeDrag: beforeDrag,
                beforeRemove: beforeRemove,
                beforeDrop: beforeDrop
            }
        };
        //定义相关的属性
        if (config.hasOwnProperty("idKey")) {
            $.extend(true,  this.treeSetting,{data: { simpleData: { idKey: config.idKey } } });
        }
        if (config.hasOwnProperty("pIdKey")) {
             $.extend(true,  this.treeSetting,{data: { simpleData: { pIdKey: config.pIdKey } } });
        }
        if (config.hasOwnProperty("rootPId")) {
            $.extend(true,  this.treeSetting,{data: { simpleData: { rootPId: config.rootPId } } });
        }
        if (config.hasOwnProperty("keyName")) {
            $.extend(true,  this.treeSetting,{data: { key: { name: config.keyName } } });
        }
        //判断相关的属性
        if (config.hasOwnProperty("addHoverDom")) {
            $.extend(true,  this.treeSetting,{view:{addHoverDom:config.addHoverDom}});
        }
        if (config.hasOwnProperty("removeHoverDom")) {
            $.extend(true,  this.treeSetting,{view:{removeHoverDom:config.removeHoverDom}});
        }
        if (config.hasOwnProperty("beforeRemove")) {
            $.extend(true,  this.treeSetting,{callback:{beforeRemove:config.beforeRemove}});
        }
        if (config.hasOwnProperty("beforeRename")) {
            $.extend(true,  this.treeSetting,{callback:{beforeRename:config.beforeRename}});
        }
        if (config.hasOwnProperty("onClick")) {
            $.extend(true,  this.treeSetting,{callback:{onClick:config.onClick}});
        }
        //额外原始的配置
        this.treeSetting =  $.extend(true, this.treeSetting,config.SelfConfig);
        //初始化
        this.Init();
    };
    adfZtree.prototype.Init = function () {
        var data = this.config.data;
        //注册变化事件
        this.RegisterEvent();
        this.LoadData(data);
    }
    //增加节点
    // 将节点推送至 json数组中
    adfZtree.prototype.AddNode = function (treeNode, data) {
        var self = this;
        self.config.data.push(data);
        var zTree = $.fn.zTree.getZTreeObj(self.treeId);
        zTree.addNodes(treeNode, data);
        //表格单击的时候得到所在行
    }
    adfZtree.prototype.UpdateNode = function (treeNode) {
        var self = this;
        //根据treeNode 得到当前的
        var zTree = $.fn.zTree.getZTreeObj(self.treeId);
        zTree.updateNode(treeNode);
        //表格单击的时候得到所在行
    }
    //删除节点
    adfZtree.prototype.DeleteNode = function(treeNode) {
        //表格单击的时候得到所在行
    }
    //加载树数据
    adfZtree.prototype.LoadData = function (rowData) {
        var setting = this.treeSetting;
        var treeId = this.config.elemId;
        $.fn.zTree.init($(treeId), setting, rowData);
    }
    adfZtree.prototype.GetNodeData = function (idKeyValue) {
        var idKeyName = this.config.idKey;
        return this.config.data.find(x=>x[idKeyName] === idKeyValue);
    }
    adfZtree.prototype.GetData = function () {
        var self = this;
        var zTree = $.fn.zTree.getZTreeObj(self.treeId);
        return zTree.transformToArray(zTree.getNodes());
    }
    /**对外方法 */
    var o = {
        render: function (options) {
            options = options || {};
            options.selfConfig = options.selfConfig || {};
            options.data = options.data || [];
            options.idKey = options.idKey || "id";
            options.pIdKey = options.pIdKey || "pIdKey";
            options.rootPId = options.rootPId || "rootPId";
            options.keyName =options.keyName || "name";
            //创建实例
            var interObj = new adfZtree(options);
            return interObj;
        }
    };
    //导出方法
    var MOD_NAME = "adfZtree";
    exports(MOD_NAME, o);
});

关键技术

• prototype 类进行类的定义各个方法
• 使用 new adfZtree 来输出具体对象
• 定义默认的 树状参数，使用extend 来覆盖外部参数值
• 将数的结构定义 json ，树的定义数据全部围绕json数组来操作，结果全部存储在本地，对外可以输出整体json 用于保存至数据库等相关的操作