挨踢小子通用Layui 数据表格方法封装处理

1、封装工具

/**
 * 通用Layui 数据表格方法封装处理
 * Copyright (c) 2019 Aiti
 */
(function ($) {
    $.extend({　
        atlay: {
            _option: {},
            _res: {},
            table: {},　
            layuiTable: function (option) {　
                layui.use(['form', 'table'], function () {
                    var table = layui.table;
                    $.atlay.table = table;　
                    var defaults = {
                        elem: '#layui-table'//为了在不动html代码的情况下的设定
                        , drag: {toolbar: true}
                        , totalRow: false
                        , uniqueId: ""//设置该表主键
                        , headToolbar: "toolbar"
                        , id: 'layui-table'//为了刷新做处理 
                        , toolbar: '#toolbarDemo'
                        , method: "post"
                        , request: {
                            pageName: 'pageNum' //页码的参数名称，默认：page
                            , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                        }
                        , response: {
                            statusName: 'code' //规定数据状态的字段名称，默认：code
                            , statusCode: 0 //规定成功的状态码，默认：0
                            , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                            , countName: 'total' //规定数据总数的字段名称，默认：count
                            , dataName: 'rows' //规定数据列表的字段名称，默认：data
                        }
                        , skin: 'line' //表格风格
                        , even: true    //隔行换色
                        , page: true //是否显示分页
                        , limits: [10, 15, 50]
                        , limit: 10 //每页默认显示的数量
                    }
                    var options = $.extend(defaults, option);
                    $.atlay._option = options;
                    table.render({
                        elem: options.elem
                        , url: options.url
                        , drag: options.drag
                        , toolbar: options.toolbar
                        , where: options.where
                        , firstWhere: options.where
                        , method: options.method
                        , totalRow: options.totalRow
                        , cols: [options.columns]
                        , request: options.request
                        , response: options.response
                        , skin: options.skin
                        , even: options.even
                        , page: options.page
                        , limits: options.limits
                        , limit: options.limit　
                        , parseData: function (res) { //res 即为原始返回的数据
                            $.atlay._res = res;　
                        }
                        , done: function () {
                            $(".layui-table td>div").on({
                                mouseover : function(){
                                    if (this.offsetWidth < this.scrollWidth) {
                                        var that = this;
                                        var text = $(this).text();
                                        window.layer.tips(text, that, {
                                            tips: 1, time: 0
                                        });
                                    }
                                } ,
                                mouseout : function(){
                                    layer.closeAll('tips');
                                }
                            })
                            $.atlay.soulTable.render(this)
                        }
                    })
                    //行编辑
                    table.on('tool(' + $.atlay._option.id + ')', function (obj) {
                        if (window.atTools) {
                            window.atTools(obj)
                        }
                    })
                    //头编辑
                    table.on('toolbar(' + $.atlay._option.id + ')', function (obj) {
                        if (window.atToolbar) {
                            window.atToolbar(obj)
                        }
                    });　
                })
            },
            selectColumns: function (columns) {
                var data = $.atlay.table.checkStatus($.atlay._option.id).data; //获取选中行状态
                if (data.length == 0) {
                    $.modal.msgWarning("请至少选择一条记录");
                    return;
                }
                var ids = [];
                for (var i = 0; i < data.length; i++) {
                    ids.push(data[i][columns]);
                }
                return ids;
            },
            // 搜索-默认第一个form
            laySearch: function (formId) {
                var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
                var search = {};
                $.each($("#" + currentId).serializeArray(), function (i, field) {
                    //search[field.name] = field.value;
                    //去除搜索值两边的空格
                    search[field.name] = field.value.toString().replace(/(^\s*)|(\s*$)|\r|\n/g, "");
                });
                debugger
                $.atlay.table.reload($.atlay._option.id, {where: search});
            },　
            layuiReload: function () {
                $.atlay.table.reload($.atlay._option.id);
            }
		　},　　
      　}, 
    });
})(jQuery); 

2、用法借鉴

function queryList() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            importUrl: prefix + "/importData", 
            where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                orderByColumn: "workId"
                , isAsc: "desc"
            },
            uniqueId:"workId", 
            columns: [{
                    checkbox: true,
                    align: "center",
                },
                {
                    field: 'workNum',
                    title: '编号',
                    align: "center",
                },
                {
                    field: 'workName',
                    title: '名称',
                    align: "center",
                    valign: 'middle',
                    minWidth:200,
                },
                {
                    field: 'workAreaStr',
                    title: '地址',
                    align: "center",
                    minWidth:180,
                    valign: 'middle',
                }, 
                {fixed: 'right',title: '操作',align: 'center', width:240,templet:function(d){
                        var actions = [];
                        actions.push('<a class="btn btn-warning btn-xs" href="#"   οnclick="commodityfun(\'' + d.workId + '\')"><i class="fa fa-life-ring"></i>btn1</a> ');
                        //actions.push('<a class="btn btn-primary btn-xs" href="#" οnclick="linefun(\'' + row.workId + '\')"><i class="fa fa-retweet"></i>btn2</a> ');
                        actions.push('<a class="btn btn-primary btn-xs" href="#"   οnclick="warehousefun(\'' + d.workId + '\')"><i class="fa fa-retweet"></i>btn3</a> ');
                        actions.push('<a class="btn btn-success btn-xs" href="#"   οnclick="workedit(\'' + d.workId + '\')"><i class="fa fa-edit"></i>btn4</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="#"    οnclick="$.operate.remove(\'' + d.workId + '\')"><i class="fa fa-remove"></i>btn5</a>');
                        return actions.join('');
                    }
                }
                 ]
        };
        $.atlay.layuiTable(options);
    };