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

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

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

一、自定义增删改操作

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

image

  • 1.添加自定义属性customOperate,需要修改源码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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判断最外层再加上我们自定义属性的判断。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 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下添加我们自定义的一些操作了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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});
}
}
});
}
}
});

弹框代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!--新增节点-->
<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>

二、选中变色

image

  • 1.修改tree.js源码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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样式

1
2
3
4
5
6
<style>
/*修改源码点击选中变色*/
.custom-tree-item-clicked {
color: #ff5722
}
</style>
-------------已经触及底线 感谢您的阅读-------------

本文标题:Layui定制化(自定义增删改操作、选中变色)

文章作者:趙小傑~~

发布时间:2019年12月03日 - 11:15:48

最后更新:2020年03月01日 - 19:50:39

原始链接:https://cnsyear.com/posts/a68e7762.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%