概述
将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 用于保存至数据库等相关的操作