本次封装实现了一个页面多次使用表格

直接上代码

例子代码

<div class="layui-fluid">

    <div class="layui-card">

        <div class="layui-card-body">

            <table class="layui-table" id="tableAdminlog" lay-filter="tableAdminlog"></table>

        </div>

    </div>

</div>



<script type="text/html" id="tablelinebar">

    <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="view">查看</a>

    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>



<script type="text/html" id="tabletoolbar">

    <div class="layui-btn-container">

        <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i></button>

        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="del">删除</button>

    </div>

</script>



<script type="text/html" id="modelView">

    <div id="modelViewDiv" class="layui-card-body">

        <table class="layui-table" lay-even lay-skin="nob" style="word-break: break-all;

word-wrap: break-word;

    border-collapse: collapse;">

            <thead>

            <tr>

                <th width="100">标题</th>

                <th>内容</th>

            </tr>

            </thead>

            <tbody>

            <tr>

                <td>id</td>

                <td>{{ d.id }}</td>

            </tr>

            <tr>

                <td>admin_id</td>

                <td>{{ d.admin_id }}</td>

            </tr>

            <tr>

                <td>用户名</td>

                <td>{{ d.username }}</td>

            </tr>

            <tr>

                <td>url</td>

                <td>{{ d.url }}</td>

            </tr>

            <tr>

                <td>标题</td>

                <td>{{ d.title }}</td>

            </tr>

            <tr>

                <td>内容</td>

                <td>{{ d.content }}</td>

            </tr>

            <tr>

                <td>ip</td>

                <td>{{ d.ip }}</td>

            </tr>

            <tr>

                <td>useragent</td>

                <td>{{ d.useragent }}</td>

            </tr>

            <tr>

                <td>createtime</td>

                <td>{{ d.createtime }}</td>

            </tr>

            </tbody>

        </table>

        <div class="layui-form-item text-right">

            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">关闭</button>

        </div>

    </div>

</script>



<script>

    layui.use(['layer','laytpl', 'atable', 'admin'], function () {

        var $ = layui.jquery;

        var layer = layui.layer;

        var atable = layui.atable;

        var laytpl = layui.laytpl;

        //表头

        var cols= [[

            {type: 'checkbox', fixed: 'left'},

            {field: 'id',  title: 'ID',width:75,align:'center'},

            {field: 'username',  title: '账号',width:120},

            {field: 'title',  title: '标题'},

            {field: 'url', title: '访问地址'},

            {field: 'ip',  title: 'IP',width:140},

            {field: 'createtime',  title: '时间',width:175},

            {align: 'center', toolbar: '#tablelinebar', title: '操作', width: 150}

]];

        window.tt=insTb = atable.render(

{

                elem:'#tableAdminlog'

                , id:'tableAdminlog'

                , checkbox : true

                , defaultToolbar: ['filter']

                ,url:'{:url("")}'

                ,toolbar:"#tabletoolbar"

                ,cols:cols

                ,limit: 15

                ,page:true

                ,listen:{

                    //单击事件

                    click:function (obj) {

},

                    //双击事件

                    double:function (obj) {

                        var data = obj.data;

                        showDetailModel(data);

},

                    //单元格工具栏

                    tool:function (obj,event) {

                        var data = obj.data;

                        switch (event) {

                            case 'view':

                                showDetailModel(data);

                                break;

                            case 'del':

                                doDel(data.id);

                                break;

}

},

                    //表格工具栏

                    toolbar:function (obj,event) {

                        switch (event) {

                            case 'del':

                                var id = insTb.getMany();

                                console.log(id);

                                if (id != null) {

                                    doDel(id);

}

                                break;

}

}

}

}

);

        // 删除

        function doDel(Ids) {

            layer.confirm('确定要删除吗？', {

                skin: 'layui-layer-admin',

                shade: .1

            }, function (i) {

                layer.close(i);

                layer.load(2);

                $.post('{:url("del")}', {

                    ids: Ids

                }, function (res) {

                    layer.closeAll('loading');

                    if (res.code) {

                        layer.msg(res.msg, {icon: 1});

                        insTb.reload();

                    } else {

                        layer.msg(res.msg, {icon: 2});

}

                }, 'json');

});

}

        // 显示表单弹窗

        function showDetailModel(mData) {

            var shtml='';

            laytpl($('#modelView').html()).render(mData,function (html) {

                shtml=html

            });

            parent.layui.admin.open({

                type: 1,

                title: (mData ? '查看' : '添加') + '日志',

                shadeClose:true,

                content: shtml,

                area: ['700px'],

                success: function (layero, dIndex) {

                    $(layero).children('.layui-layer-content').css('overflow', 'visible');

}

});

}

});

</script>

atable.js 代码

/**

@ Name：表格冗余列可展开显示

@ Author：hbm

@ License：MIT

*/

layui.define(['form', 'table'], function (exports) {

    var $ = layui.$

        , table = layui.table

        ,hint = layui.hint()

        , form = layui.form

        , VERSION = 3.0, MOD_NAME = 'atable', ELEM = '.layui-atable', ON = 'on', OFF = 'off';

    //日期格式化

    Date.prototype.format = function (format) {

        var args = {

            "M+": this.getMonth() + 1,

            "d+": this.getDate(),

            "h+": this.getHours(),

            "m+": this.getMinutes(),

            "s+": this.getSeconds(),

            "q+": Math.floor((this.getMonth() + 3) / 3), //quarter

            "S": this.getMilliseconds()

};

        if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

        for (var i in args) {

            var n = args[i];

            if (new RegExp("(" + i + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));

}

        return format;

};

    //获取字面量数组的第一个id项

    var  paraGetOneId = function (para) {

                if(para.length==0){

                    return null;

                }else{

                    var temp=para[0];

                    return temp.id;

}

}

        ,paraGetId = function (para) {

            var ids=[];

            if(para.length==0){

                return null;

}

            for(var i=0;i<para.length;i++){

                ids.push(para[i].id)

}

            return ids;

}

        //外部接口

        , atable = {

            config: table.config,

            index: layui.table.index,

            cache: layui.table.cache

            //设置全局项

            , set: layui.table.set

            //事件监听

            , on: layui.table.on

            , reload: layui.table.reload

            , init: layui.table.init

            , checkStatus: layui.table.checkStatus

        }

        //操作当前实例

        , thisIns = function () {

            var that = this

                , options = that.config

                , id = options.id || options.index;

            if(id){

                thisIns.that[id] = that; //记录当前实例对象

                thisIns.config[id] = options; //记录当前实例配置项

            }

            return {

                config: options

                ,reload: function(options){

                    console.log(options);

                    that.reload.call(that, options);

}

                ,setColsWidth: function(){

                    that.setColsWidth.call(that);

}

                ,resize: function(){ //重置表格尺寸/结构

                    that.resize.call(that);

}

                ,getData: function () {

                    //获取数据

                    return table.checkStatus(that.config.id).data;

}

                ,getStatus: function () {

                    var checkStatus = table.checkStatus(that.config.id);

                    return checkStatus;

}

                ,getOne: function () {

                    var table_data = this.getData();

                    if (table_data == null) {

                        layer.msg("无法获取选中数据", {icon: 2});

                        return null;

}

                    if (table_data.length != 1) {

                        if (table_data.length == 0) {

                            layer.msg("至少要选中一条数据", {icon: 2});

                        } else {

                            layer.msg("只能选择一条数据", {icon: 2});

}

                        return null;

}

                    var one_id = paraGetOneId(table_data);

                    if (one_id == null) {

                        layer.msg("无法获取选中行id", {icon: 2});

                        return null;

}

                    return one_id;

}

                ,getMany: function (type = false) {

                    var table_data = this.getData();

                    if (table_data == null) {

                        layer.msg("无法获取选中数据", {icon: 2});

                        return null;

}

                    if (table_data.length < 1) {

                        layer.msg("至少要选中一条数据", {icon: 2});

                        return null;

}

                    var many_id = paraGetId(table_data);

                    if (many_id == null) {

                        layer.msg("无法获取选中行id", {icon: 2});

                        return null;

}

                    if (type) return many_id;

                    return many_id.join(',');

}

                ,search: function (search_param=[],page=1) {

                    var search_param = {

                        where: search_param,

                        page: {

                            curr: page

                        }

};

                    this.reload.call(that, search_param);

}

}

}

        //获取当前实例配置项

        ,getThisTableConfig = function(id){

            var config = thisIns.config[id];

            if(!config) hint.error('The ID option was not found in the table instance');

            return config || null;

}

        //构造器

        , Class = function (options) {

            var that = this;

            that.index = ++atable.index;

            that.config = $.extend({}, that.config, atable.config, options);

            that.render();

            return this;

};

    //默认配置

    Class.prototype.config = {

        checkbox:false  //单击勾选

        ,request: {

            //页码的参数名称,默认：page

                  pageName: 'page'

                //每页数据量的参数名,默认：limit

                , limitName: 'limit'

        }

        //对分页返回数据进行转换

        , parseData: function (res) {

            return {

                //解析接口状态

                "code": res.code,

                //解析提示文本

                "msg": res.msg,

                //解析数据长度

                "count": res.total,

                //解析数据列表

                "data": res.data

            };

}

        //接口http请求类型

        , method: 'get'

        , limit: 5

        , limits:[15,30,50,100]

};

    //渲染视图

    Class.prototype.render = function () {

        var that = this

            , options = that.config

            , instable = null;

        //  2、表格Render

        instable = table.render(options);

        //  当前表格 lay-filter ID

        var elem = $(options.elem).attr("lay-filter");

        //  5、监听表格排序

        table.on('sort(' + elem + ')', function (obj) {

            if (options.listen && options.listen.sort) {

                options.listen.sort(obj)

}

});

        //  监听单元格  单击事件

        table.on('row('+ elem +')', function(obj){

            var checkCell=obj.tr.find(".layui-form-checkbox");

            if(options.checkbox == true){

                if(obj.tr.hasClass('layui-table-click')){

                    obj.tr.removeClass('layui-table-click');

                    checkCell.removeClass('layui-form-checked');

                    table.cache[elem][obj.tr[0].rowIndex]['LAY_CHECKED'] = false;

                }else {

                    obj.tr.addClass('layui-table-click');

                    checkCell.addClass('layui-form-checked');

                    table.cache[elem][obj.tr[0].rowIndex]['LAY_CHECKED'] = true;

}

}

            if (options.listen && options.listen.click) {

                options.listen.click(obj)

}

});

        //  监听单元格  双击事件

        table.on('rowDouble('+ elem +')', function(obj){

            if (options.listen && options.listen.double) {

                options.listen.double(obj)

}

});

        //  监听单元格  编辑事件

        table.on('edit(' + elem + ')', function (obj) {

            if (options.listen && options.listen.edit) {

                options.listen.edit(obj)

}

});

        // 监听复选框事件

        table.on('checkbox(' + elem + ')', function(obj){

            if (options.listen && options.listen.checkbox) {

                options.listen.checkbox(obj)

}

});

        //  监听行工具栏 事件

        table.on('tool('+ elem +')', function (obj) {

            if (options.listen && options.listen.tool) {

                var event = obj.event ? obj.event : null;

                options.listen.tool(obj,event);

}

});

        // 监听表格头部工具栏事件

        table.on('toolbar('+elem+')', function(obj){

            switch(obj.event){

                case 'refresh':

                    instable.reload({page:{curr: 1}});

                    break;

}

            if (options.listen && options.listen.toolbar) {

                var event = obj.event ? obj.event : null;

                options.listen.toolbar(obj,event);

}

});

};

    //表格重载

    Class.prototype.reload = function(options){

        var that = this;

        options = options || {};

        delete that.haveInit;

        if(options.data && options.data.constructor === Array) delete that.config.data;

        that.config = $.extend(true, {}, that.config, options);

        that.render();

};

    //记录所有实例

    thisIns.that = {}; //记录所有实例对象

    thisIns.config = {}; //记录所有实例配置项

//核心入口

    atable.render = function (options) {

        var ins = new Class(options);

        return thisIns.call(ins);

};

    //在表头,以指定格式进行时间转换

    atable.date_format=function (date, format) {

        if(format==null){

            format="yyyy-MM-dd hh:mm:ss";

}

        if (date != null) {

            return new Date(date).format(format)

}

        return "";

};

    //设置状态

    atable.status = function(obj,status='status'){

        var strs = [

            '<span class="text-danger">停用</span>',

            '正常'

        ];

        return strs[obj.status];

};

    //表格重载

    atable.reload = function(id, options){

        var config = getThisTableConfig(id); //获取当前实例配置项

        if(!config) return;

        var that = thisIns.that[id];

        that.reload(options);

        return thisIns.call(that);

};

    exports('atable', atable);

});