layui自定义js模块（实例）

注意：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);});

截图：

---

第二步：在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>

教程到此结束。

---

番外：
待注意事项：

• exports(‘tablechecked’, tablechecked); //key你懂吧？ 待会在第二步就要用key值来获取var table这个对象。继而调用对象中函数
• layui.use([tablechecked])表示 ，使用这个模块，也就是咱自定义的js文件。
• 通过layui.key通过key来获取对象var tools=layui.tablechecked;

到此，番外也结束了，以上这些，基本上够用了。更多的我暂时不知道，如果你在阅读中遇见任何问题，欢迎你随时给我留言。