/**
* @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();
如有错误,敬请指正!