layui表格嵌套
layui表格嵌套
loadLogList: function (oo) {
App.ajax({
resUrl: "/alarms/groupView",
data: oo,
// page: true, //开启分页
callback: function (result) {
console.log(result.intTotalRow)//-------这里总数返回195条,下面的table.render却只对 ajax返回的20条数据进行分页
layui.use('table', function () {
var table = layui.table;
App.setTable({
elem: '#layui-user-table',
// url: 'http://127.0.0.1/assets/jsons/siteMonitor.json',
url: '/alarms/groupView',
where:oo,
cols: [[
// /!*{ field: 'id', title: "编号"},*!/
{type: 'numbers',
title: '编号',
width: 70,
event: 'collapse',
templet: function (d) {
return '' + d.ower + ''
}
},
{ field: 'name', width:600, title: "GROUP",unresize:true,templet:'#name_html'},
{ field: 'ower',width:200, title: "OWER",unresize:true,align:"center"},
{ field: 'maxRisk',width:150, title: "HIGHEST RISK",unresize:true,templet:'#risk_html'},
{ field: 'description',width:210, title: "DESCRIPTION",unresize:true},
{ field: 'status',width:150, title: "STATUS",unresize:true,align:"center"},
{fixed: 'right', title:'ACTION',align:'center', width: 100, toolbar: '#result-barBtn1'}//这里的toolbar值是模板元素的选择器
]], id: 'idAlarmsGroupView'
}, table);
//监听工具条
table.on('tool(idAlarmsGroupView)',
function (obj) {
var data = obj.data;
if (obj.event === 'collapse') {
var trObj = layui.$(this).parent('tr'); //当前行
var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
var content = '
' //内容
//表格行折叠方法
pageAct.collapseTable({
elem: trObj,
accordion: accordion,
content: content,
success: function (trObjChildren, index) { //成功回调函数
//trObjChildren 展开tr层DOM
//index 当前层索引
trObjChildren.find('table').attr("id", index);
App.ajax({
resUrl: "/alarms/groupView",
data: {
groupByName: 'Alarm Name,Src/Dst,Date'
},
callback: function (result) {
table.render({
elem: "#" + index,
// url: '/alarms/groupView',
// limit: 6,
cellMinWidth: 80,
data: result.data,
page: true, //开启分页
cols: [[
// {field: 'id', title: "编号", width: 70, sort: true},
{type: 'numbers', title: '编号', width: 70},
{
field: 'name',
width: 600,
title: "GROUP",
unresize: true,
templet: '#name_html'
},
{
field: 'ower',
width: 200,
title: "OWER",
unresize: true,
align: "center"
},
{
field: 'maxRisk',
width: 150,
title: "HIGHEST RISK",
unresize: true,
templet: '#risk_html'
},
{
field: 'description',
width: 210,
title: "DESCRIPTION",
unresize: true
},
{
field: 'status',
width: 150,
title: "STATUS",
unresize: true,
align: "center"
},
{
fixed: 'right',
title: 'ACTION',
align: 'center',
width: 100,
toolbar: '#result-barBtn1'
}//这里的toolbar值是模板元素的选择器
]]
});
}
});
}
});
}
});
});
form.render();
}
});
},
collapseTable: function(options) {
var trObj = options.elem;
if (!trObj) return;
var accordion = options.accordion,
success = options.success,
content = options.content || '';
var tableView = trObj.parents('.layui-table-view'); //当前表格视图
var id = tableView.attr('lay-id'); //当前表格标识
var index = trObj.data('index'); //当前行索引
var leftTr = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + index + '"]'); //左侧当前固定行
var rightTr = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + index + '"]'); //右侧当前固定行
var colspan = trObj.find('td').length; //获取合并长度
var trObjChildren = trObj.next(); //展开行Dom
var indexChildren = id + '-' + index + '-children'; //展开行索引
var leftTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + indexChildren + '"]'); //左侧展开固定行
var rightTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + indexChildren + '"]'); //右侧展开固定行
var lw = leftTr.width() + 15; //左宽
var rw = rightTr.width() + 15; //右宽
//不存在就创建展开行
if (trObjChildren.data('index') != indexChildren) {
//装载HTML元素
var tr = '' + content + '