简单封装layui的table组件

/**
 * @namespace LSTable
 * @version 1.0
 * @author fate
 * @time 2019年11月11日19:44:13
 * @description 对layui table进行封装，这样就不会依赖layui的版本，每次升级layui改此文件就行
 * 依赖: layui, jquery
 */
(function () {
    var LSTable = function (options) {
        this.id = null;
        this.table = null;
        this.options = null;
        // 选中的条目
        this.selectedItem = null;

        this.init(options);
    };

    LSTable.DEFAULTS = {
        limit: 15,
        limits: [15, 30, 50],
        page: true //开启分页
    };
    LSTable.prototype = {
        getDefaults: function () {
            return LSTable.DEFAULTS;
        },
        /**
         * 获取基础配置
         */
        getOptions: function (options) {
            return $.extend({}, this.getDefaults(), options);
        },

        /**
         * 初始化
         */
        init: function (options) {
            if (!options.elem) {
                throw new Error('`elem` option must be specified when initializing LSTable on the window.document object!')
            }
            if (!parent.layui.table) {
                throw new Error('Unloaded layui.table!');
            }
            this.table = parent.layui.table;
            this.options = this.getOptions(options);
            this.id = this.options.elem.replace('#', '');
            this.table.render(this.options);
        },
        /**
         * 获取选中状态
         */
        getCheckStatus: function () {
            return this.table.checkStatus(this.id);
        },
        checkCase: function (cs) {
            var checkStatus = this.getCheckStatus();
            var checked = checkStatus.data.length > 0;
            switch (cs) {
                // 判断是否选中
                case 0:
                default:
                    if (!checked) {
                        alert("请先选择一条数据!");
                        return checked;
                    }
                    break;
                case 1:
                    checked = checkStatus.data.length === 1;
                    if (!checked) {
                        alert("请先选择一条且只能选择一条数据!");
                        return checked;
                    }
                    break;
                case 2:
                    checked = checkStatus.isAll;
                    if (!checked) {
                        alert("请先选择全部数据!");
                        return checked;
                    }
                    break;
            }
            this.selectedItem = checkStatus.data;
            return checked;
        },
        /**
         * 判断是否选中
         */
        checked: function () {
            return this.checkCase(0);
        },
        /**
         * 判断是否只选中一条
         */
        checkedOne: function () {
            return this.checkCase(1);
        },
        /**
         * 表格是否全选
         * @returns {boolean}
         */
        checkedAll: function () {
            return this.checkCase(2);
        },
        /**
         * 获取到选中的数据
         */
        checkedItem: function () {
            return this.checkCase();
        },
        /**
         * 查询
         * @param queryData
         */
        search: function (queryData) {
            this.table.refresh({query: queryData});
        }

    };


    window.LSTable = LSTable;
})(window);

// 测试

<!-- html -->
<table class="layui-hide" id="demo" lay-filter="test"></table>

// 在layui代码环境下执行 js

var count = 1000;
var arr = [];
for (var i = 0; i < count; i ++) {
    var obj = {"id":i,"username":"fate-"+i,"sex":"男"+i,"city":"城市-"+i,"sign":"签名-"+i,"experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57};
    arr.push(obj);
}
var UserTable = {
    lsTable: null,
    layerIndex: -1,
    option: {
        elem: '#demo'
        ,height: 420
        ,title: '用户表'
        ,cols: [[ //表头
            {type: 'checkbox', fixed: 'left'}
            ,{field: 'id', title: 'ID', width:80, sort: true}
            ,{field: 'username', title: '用户名', width:80}
            ,{field: 'experience', title: '积分', width: 90, sort: true}
            ,{field: 'sex', title: '性别', width:80, sort: true}
            ,{field: 'score', title: '评分', width: 80, sort: true}
            ,{field: 'city', title: '城市', width:150}
            ,{field: 'sign', title: '签名', width: 200}
            ,{field: 'classify', title: '职业', width: 100}
            ,{field: 'wealth', title: '财富', width: 135, sort: true}
        ]]
        ,data: arr
    }
};
UserTable.init = function () {
    this.lsTable = new LSTable(this.option);
};

// 给一个按钮点击事件，判断表格勾选情况

$(".btn").click(function() {
    UserTable.lsTable.getCheckStatus();
});

// 调用初始化

UserTable.init();

如有错误，敬请指正！