Mikel
来源： layui自定义js模块（实例） – UglyCode – CSDN博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36571185/article/details/78140969
注意：layui自定义模块，整个过程就两步，步骤虽少，但还是要多注意的细节问题，不然在定义模块上花费太多精力就不值得了。
第一步：定义模块
tablechecked.js
layui.define([‘layer’], function(exports) {
“use strict”;
var $ = layui.JQuery,
layer = layui.layer;
var table = {
/**
* 带有选择框的表格绑定多选事件
* @param tblId
*/
tableBindCheckClick: function (tblId) {
var tblObj = $(“#” + tblId);
tblObj.on(‘click’, ‘thead input[type=”checkbox”]’, function () {
var obj = $(“#” + tblId + ” tbody input[type=’checkbox’]:checkbox”);
if (this.checked) {
obj.prop(“checked”, true);
} else {
obj.prop(“checked”, false);
}
});
},
/**
* 获取带有选择框的表格选中的记录Ids
* @param tblId
* @returns {string}
*/
getTableCheckedRowIds: function (tblId) {
var ids = ”;
var tblObj = $(“#” + tblId);
tblObj.find(” tbody input[type=checkbox]:checked”).each(function(){
ids += $(this).val() + ‘,’;
});
// 去除最后一位逗号
ids = ids.substr(0, (ids.length-1));
return ids;
}
};
//expotts(“key”,value)
//key你懂吧？ 待会在第二步就要用key值来获取var table这个对象。继而调用对象中函数
exports(‘tablechecked’, table);
});
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
截图：
第二步：在js中使用模块
<script th:src=”@{/layui/layui.js}”></script>
<script type=”text/JavaScript” th:inline=”JavaScript”>
//一般直接写在一个js文件中
layui.config({
base:’/selfjs/’
});
//这里先use，表示使用 base:’/selfjs/’目录下的tablechecked.js文件
layui.use([‘form’,’element’,’layer’,’tablechecked’], function(){
var $ = layui.JQuery,
//layui.key通过key来获取对象
tools=layui.tablechecked;
//顶部新增事件监听
console.log(“准备新增”);
$(‘#addBtn’).on(‘click’,function(){
top.layer.open({
type:2,
area:[‘450px’,’380px’],
resize:false,
title:’商品添加’,
content:’/sys_stuff/edit’
});
});
//更新事件
console.log(“准备更新”);
$(‘.smt-update’).on(‘click’,function(){
top.layer.open({
type:2,
area:[‘450px’,’400px’],
resize:false,
title:’用户编辑’,
content:’/sys_stuff/edit?id=’+$(this).data(‘id’)
});
});
//删除事件
console.log(“准备删除”);
$(‘#btnDelete’).on(‘click’, function(){
var ids = tools.getTableCheckedRowIds(“myTable”);
if(!ids) return layer.msg(‘请先选择需要删除的记录。’, {time:1500, icon:0});
layer.confirm(‘确定删除?’, {icon: 3, title:’提示’}, function(index){
$.ajax({
type: ‘POST’,
url: /*[[@{/sys_stuff/delete}]]*/”,
data: {ids: ids },
dataType: ‘json’,
success: function (result) {
if (result.code == 0) {
layer.msg(‘删除成功’, {icon: 1,time: 1000});
setTimeout(function(){
parent.refreshIframe();
},800);
}
else {
layer.msg(‘删除失败！’+result.msg, {time:1000,icon: 2});
}
},
error: function(result, type) {
layer.msg(‘删除失败！’, { time:1000,icon: 2 });
}
});
});
});
});
</script>
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
62
63
64
65
66
67
68
69
70
71
72
教程到此结束。
番外：
待注意事项：
exports(‘tablechecked’, tablechecked); //key你懂吧？ 待会在第二步就要用key值来获取var table这个对象。继而调用对象中函数
layui.use([tablechecked])表示 ，使用这个模块，也就是咱自定义的js文件。
通过layui.key通过key来获取对象var tools=layui.tablechecked;
到此，番外也结束了，以上这些，基本上够用了。更多的我暂时不知道，如果你在阅读中遇见任何问题，欢迎你随时给我留言。
————————————————
版权声明：本文为CSDN博主「欧吃伞」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_36571185/article/details/78140969
