Layui tree定制化(自定义增删改操作、选中变色）

Layui tree定制化(自定义增删改操作、选中变色）

定制化之前，请先熟悉LayuiTree文档基本操作。

一、自定义增删改操作

Layui tree自带的增删改操作，太鸡肋不太符合我们的要求。新增修改弹框操作、删除提示确实框。

• 1.添加自定义属性customOperate，需要修改源码。

tree.render({
    elem: '#test1'
    ,data: data
    ,onlyIconControl: true
    ,edit: ['add', 'update', 'del']
    ,click: function(obj){
      var data = obj.data;  
      layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
    }
	,customOperate: true //自定义属性
    ,operate: function (obj) {
		//省略。。
	}
  });

• 2.修改tree.js源码

如果是压缩版先格式化，搜索prototype.operate或者if ("add" == f)，修改源码在原先的if判断最外层再加上我们自定义属性的判断。

 b.prototype.operate = function(e, a) {
    var t = this,
    r = t.config,
    l = e.children("." + p),
    d = l.children("." + f);
    l.children(".layui-tree-btnGroup").on("click", ".layui-icon",
    function(l) {
        layui.stope(l);
        var f = i(this).data("type"),
        b = e.children("." + v),
        g = {
            data: a,
            type: f,
            elem: e
        };
		//注意这里的r 对应着上面的r = t.config的变量 有可能你的不叫r，修改成自己的变量名称
		if (r.customOperate) {
            console.log("修改源码。。。");
			//注意这里的g 对应着上面的g = {data: a, type: f, elem: e}的变量 有可能你的不叫g，修改成自己的变量名称
            r.operate && r.operate(g);
        } else {
			//注意要把下面整个if else if 到粘过来
			
			//省略。。。
		}
    })
},

• 3.增加自定义操作

修改完源码后，再次点击增删改按钮就不会执行默认的方法了。我们就可以在operate下添加我们自定义的一些操作了。

var index0pen;
  var $ = layui.$;
 
  //基本演示
  tree.render({
    elem: '#test1'
    ,data: data
    ,onlyIconControl: true
    ,edit: ['add', 'update', 'del']
    ,click: function(obj){
      var data = obj.data;  
      layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
    }
	,customOperate: true
    , operate: function (obj) {
		var type = obj.type; //得到操作类型：add、edit、del
		var data = obj.data; //得到当前节点的数据
		var elem = obj.elem; //得到当前节点元素

		//Ajax 操作
		var id = data.id; //得到节点索引
		if (type === 'add') { //增加节点
			$("#add-form input[name='parentId']").val(id);
			$("#add-form input[name='title']").val('');
			index0pen = layer.open({
				type: 1,
				title: "新增",
				area: ['500px', '200px'],
				content: $("#add-node")
			});
		} else if (type === 'update') { //修改节点
			$("#update-form input[name='deptId']").val(id);
			$("#update-form input[name='parentId']").val(data.parentId);
			$("#update-form input[name='title']").val(data.title);
			index0pen = layer.open({
				type: 1,
				title: "修改",
				area: ['500px', '200px'],
				content: $("#update-node")
			});
		} else if (type === 'del') { //删除节点
			$.ajax({
				url: '/admin/dept/delete/' + id,
				type: 'get',
				dataType: 'json',
				success: function (data) {
					if (data.code == 0) {
						//关闭
						layer.close(index0pen);
						layer.msg('删除成功！', {icon: 1});
						setTimeout(function () {
							window.location.reload();
						}, 500);
					} else {
						layer.msg(data.msg, {icon: 2});
					}
				}
			});
		}
	}
  });

弹框代码

<!--新增节点-->
<div id="add-node" class="layui-fluid" style="display: none;">
    <form class="layui-form" id="add-form" action="">
        <input type="text" name="parentId" style="display:none;" class="layui-input">
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" class="layui-input" required="" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addNode">保存</button>
            </div>
        </div>
    </form>
</div>

<!--修改节点-->
<div id="update-node" class="layui-fluid" style="display: none;">
    <form class="layui-form" id="update-form" action="">
        <input type="text" name="deptId" style="display:none;" class="layui-input">
        <input type="text" name="parentId" style="display:none;" class="layui-input">
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" class="layui-input" required="" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateNode">保存</button>
            </div>
        </div>
    </form>
</div>

二、选中变色

• 1.修改tree.js源码

搜索prototype.spread或者"open": "close"。

b.prototype.spread = function(e, a) {
    var n = this,
    t = n.config,
    r = e.children("." + p),
    l = r.children("." + f),
    c = r.find("." + o),
    k = r.find("." + y),
    m = t.onlyIconControl ? c: l,
    x = "";
    m.on("click",
    function(i) {
        var a = e.children("." + v),
        n = m.children(".layui-icon")[0] ? m.children(".layui-icon") : m.find(".layui-tree-icon").children(".layui-icon");
        if (a[0]) {
            if (e.hasClass(C)) e.removeClass(C),
            a.slideUp(200),
            n.removeClass(u).addClass(h);
            else if (e.addClass(C), a.slideDown(200), n.addClass(u).removeClass(h), t.accordion) {
                var r = e.siblings("." + s);
                r.removeClass(C),
                r.children("." + v).slideUp(200),
                r.find(".layui-tree-icon").children(".layui-icon").removeClass(u).addClass(h)
            }
        } else x = "normal"
    }),
    k.on("click",
    function() {
		
		//修改源码点击选中变色
        layui.$("." + p).removeClass("custom-tree-item-clicked");
		//注意这里的k 对应着上面的k.on("click",的变量 有可能你的不叫k，修改成自己的变量名称
        k.addClass("custom-tree-item-clicked");
		
        var n = i(this);
        n.hasClass(d) || (x = e.hasClass(C) ? t.onlyIconControl ? "open": "close": t.onlyIconControl ? "close": "open", t.click && t.click({
            elem: e,
            state: x,
            data: a
        }))
    })
}

添加css样式

<style>
    /*修改源码点击选中变色*/
    .custom-tree-item-clicked {
        color: #ff5722
    }
</style>