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>