layui自定义js模块(实例) – UglyCode – CSDN博客

来源: 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

本文来自网络,不代表Mikel立场,转载请注明出处:http://www.mikel.cn/%e5%bc%80%e5%8f%91%e7%ac%94%e8%ae%b0/javascript/layui%e8%87%aa%e5%ae%9a%e4%b9%89js%e6%a8%a1%e5%9d%97%ef%bc%88%e5%ae%9e%e4%be%8b%ef%bc%89-uglycode-csdn%e5%8d%9a%e5%ae%a2.html
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部