本次封裝實(shí)現(xiàn)了一個(gè)頁(yè)面多次使用表格
直接上代碼
例子代碼
<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">標(biāo)題</th>
<th>內(nèi)容</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>標(biāo)題</td>
<td>{{ d.title }}</td>
</tr>
<tr>
<td>內(nèi)容</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">關(guān)閉</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: '賬號(hào)',width:120},
{field: 'title', title: '標(biāo)題'},
{field: 'url', title: '訪問(wèn)地址'},
{field: 'ip', title: 'IP',width:140},
{field: 'createtime', title: '時(shí)間',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('確定要?jiǎng)h除嗎荷逞？', {
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：表格冗余列可展開(kāi)顯示
@ 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;
};
//獲取字面量數(shù)組的第一個(gè)id項(xiàng)
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
//設(shè)置全局項(xiàng)
, set: layui.table.set
//事件監(jiān)聽(tīng)
, on: layui.table.on
, reload: layui.table.reload
, init: layui.table.init
, checkStatus: layui.table.checkStatus
}
//操作當(dāng)前實(shí)例
, thisIns = function () {
var that = this
, options = that.config
, id = options.id || options.index;
if(id){
thisIns.that[id] = that; //記錄當(dāng)前實(shí)例對(duì)象
thisIns.config[id] = options; //記錄當(dāng)前實(shí)例配置項(xiàng)
}
return {
config: options
,reload: function(options){
console.log(options);
that.reload.call(that, options);
}
,setColsWidth: function(){
that.setColsWidth.call(that);
}
,resize: function(){ //重置表格尺寸/結(jié)構(gòu)
that.resize.call(that);
}
,getData: function () {
//獲取數(shù)據(jù)
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("無(wú)法獲取選中數(shù)據(jù)", {icon: 2});
return null;
}
if (table_data.length != 1) {
if (table_data.length == 0) {
layer.msg("至少要選中一條數(shù)據(jù)", {icon: 2});
} else {
layer.msg("只能選擇一條數(shù)據(jù)", {icon: 2});
}
return null;
}
var one_id = paraGetOneId(table_data);
if (one_id == null) {
layer.msg("無(wú)法獲取選中行id", {icon: 2});
return null;
}
return one_id;
}
,getMany: function (type = false) {
var table_data = this.getData();
if (table_data == null) {
layer.msg("無(wú)法獲取選中數(shù)據(jù)", {icon: 2});
return null;
}
if (table_data.length < 1) {
layer.msg("至少要選中一條數(shù)據(jù)", {icon: 2});
return null;
}
var many_id = paraGetId(table_data);
if (many_id == null) {
layer.msg("無(wú)法獲取選中行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);
}
}
}
//獲取當(dāng)前實(shí)例配置項(xiàng)
,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;
}
//構(gòu)造器
, Class = function (options) {
var that = this;
that.index = ++atable.index;
that.config = $.extend({}, that.config, atable.config, options);
that.render();
return this;
};
//默認(rèn)配置
Class.prototype.config = {
checkbox:false //單擊勾選
,request: {
//頁(yè)碼的參數(shù)名稱,默認(rèn)：page
pageName: 'page'
//每頁(yè)數(shù)據(jù)量的參數(shù)名,默認(rèn)：limit
, limitName: 'limit'
}
//對(duì)分頁(yè)返回?cái)?shù)據(jù)進(jìn)行轉(zhuǎn)換
, parseData: function (res) {
return {
//解析接口狀態(tài)
"code": res.code,
//解析提示文本
"msg": res.msg,
//解析數(shù)據(jù)長(zhǎng)度
"count": res.total,
//解析數(shù)據(jù)列表
"data": res.data
};
}
//接口http請(qǐng)求類型
, 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);
// 當(dāng)前表格 lay-filter ID
var elem = $(options.elem).attr("lay-filter");
// 5曲横、監(jiān)聽(tīng)表格排序
table.on('sort(' + elem + ')', function (obj) {
if (options.listen && options.listen.sort) {
options.listen.sort(obj)
}
});
// 監(jiān)聽(tīng)單元格 單擊事件
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)
}
});
// 監(jiān)聽(tīng)單元格 雙擊事件
table.on('rowDouble('+ elem +')', function(obj){
if (options.listen && options.listen.double) {
options.listen.double(obj)
}
});
// 監(jiān)聽(tīng)單元格 編輯事件
table.on('edit(' + elem + ')', function (obj) {
if (options.listen && options.listen.edit) {
options.listen.edit(obj)
}
});
// 監(jiān)聽(tīng)復(fù)選框事件
table.on('checkbox(' + elem + ')', function(obj){
if (options.listen && options.listen.checkbox) {
options.listen.checkbox(obj)
}
});
// 監(jiān)聽(tīng)行工具欄 事件
table.on('tool('+ elem +')', function (obj) {
if (options.listen && options.listen.tool) {
var event = obj.event ? obj.event : null;
options.listen.tool(obj,event);
}
});
// 監(jiān)聽(tīng)表格頭部工具欄事件
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();
};
//記錄所有實(shí)例
thisIns.that = {}; //記錄所有實(shí)例對(duì)象
thisIns.config = {}; //記錄所有實(shí)例配置項(xiàng)
//核心入口
atable.render = function (options) {
var ins = new Class(options);
return thisIns.call(ins);
};
//在表頭,以指定格式進(jìn)行時(shí)間轉(zhuǎn)換
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 "";
};
//設(shè)置狀態(tài)
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); //獲取當(dāng)前實(shí)例配置項(xiàng)
if(!config) return;
var that = thisIns.that[id];
that.reload(options);
return thisIns.call(that);
};
exports('atable', atable);
});
