改造layui-树（tree）组件支持添加、编辑、删除的自定义（弹框）操作

新公司的项目用了layui，使用过程中踩了不少坑，大多来自tree组件，接下来如果有时间会一一码下来

layui的tree组件可以开启节点操作（添加、编辑、删除），用过的同学应该了解官方提供的逻辑是点击添加树上新增一层并命名为“未命名”然后我们在操作节点的回调operate里可以做与后台的交互，这样一个添加操作要走两步：添加+编辑。而按照我们的代码习惯添加的接口走完之后我们会重新绘制树——tree的节点是否展开由数据源里的spread决定，那么重新绘制树如果不指定每一层数据的spread值整个树就会恢复只展示根节点的形式，用户体验会非常差。下面针对这些我们对tree.js（找一下自己项目里的tree.js）源码进行修改以适应实际项目应用

1、完全让开发人员自定义树的节点操作：

个人感觉官方提供的树节点操作完全无意义，因为根本不可能适应实际的开发项目

配置里加上

customOperate: false,

 

      ​

在节点原来的操作上加一个customOperate判断，如果我们设置了customOperate为true那么直接走回调函数，把官方的操作放到else里

​

tree组件使用：

​

以上，可以随心所欲操作树节点-各种弹框写起来

 2、解决节点操作后重新绘制树只显示根节点的问题——其实就是对后台返回数据做了处理

其中的deptId是当前操作节点的id，在上一张图operate里有赋值

openTree方法如下：

    // 部门树展开
	var openTree = function(treeData, objId) {
		var nodeId = familyTree(treeData, objId);

		function each(data) {
			data.forEach(e => {
				if (nodeId.indexOf(e.id) != -1) {
					e.spread = true;
				}
				if (e.children.length > 0) {
					each(e.children);
				}
			})
		}
		each(treeData);
		return treeData;
	};

以上