- 我们在写前端页面时为了节省时间总会用到框架，我这次用的是Layui框架做一个扩展列表
- 如图
- 这是其中一个，我主要讲的是，父子表
- 父子表就是在每一行数据种展开一个列表，它是由两个请求获取数据
<head>
<meta charset="utf-8">
<title>在线调试</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="自己的地址/layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="自己的地址/css/soulTable.css" media="all"/>
<script type="text/javascript" src="自己的地址/layui/layui.js"></script>
</head>
<body>
<script>
// 自定义模块
layui.config({
base: '自己的地址/layui/ext/', // 模块目录
version: 'v1.6.0'
}).extend({ // 模块别名
soulTable: 'soulTable'
});
layui.use(['form', 'table','soulTable'], function () {
var table = layui.table,
soulTable = layui.soulTable;
table.render({
elem: '#myTable4'
,url: '父表请求的地址'
,page: true
,id:'aa'
,height: 800
,cols: [[
{type: 'checkbox'},
{title: ' ', width: 50, icon: ['layui-icon layui-icon-triangle-r', 'layui-icon layui-icon-triangle-d'], children:[
{
title: '列表一'
,url: function(row){
console.log(row)
return '请求地址?userid='+row.userid;//我根据父表的id获取子表
}
,height: 500//高度不写会被压缩
,id:'dd'
,page: true
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field: 'userid', title: '用户ID', sort: true, filter: true},
{field: 'username', title: '用户名', sort: true, filter: true},
{field: 'eferencesid', title: '所属业务员', filter: true},
{field: 'power', title: '权力', filter: true},
{field: 'joindate', title: '加入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true},
{title: '操作', width: 156,align:'center', toolbar: '#childBar'}
]]
,done: function () {
soulTable.render(this);
}
, limit: 10 // 当前页数
, limits: [10, 30, 50, 100, 200, 500, 1000, 5000, 10000, 20000, 50000]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
var result;
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
} else {
result = res.data.slice(0, this.limit);
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
},
toolEvent: function (obj) {//这是在列后面的监听事件，就是列后面的按钮
var layEvent = obj.event, // 获取 lay-event 对应的值
tr = obj.tr, // 获取当前行 的 dom 对象（如果有的话）
data = obj.data; // 当前行数据
// console.log('[父表tool事件] 当前行对象:', tr)
// console.log('[父表tool事件] 当前行数据:', data)
if (layEvent === 'edit') {
//同步更新缓存对应的值
console.log(data.userid)
layer.open({
type: 1,
title: '头',
area: ['350px', '200px'],//定义宽高
content: $("#test"), //这里content是一个普通的String
shade: 0,
btn: ['确定']
, btn1: function () {
return true;
},
cancel: function () {
layer.closeAll();
}
});
} else if (layEvent === 'del') {
layer.confirm('真的删除么', function(index){
console.log(data.userid)
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
}
}
,
toolbarEvent: function (obj, pobj) {//工具条监听
var check = table.checkStatus(this.id);
console.log(this.id);
console.log(check);
console.log(check.data);
console.log(obj);
// obj 当前行对象
if (obj.event === 'batchzr') {
layer.msg('重载成功！')
}
}
}
]},
{field: 'userid', title: '用户ID', sort: true, filter: true},
{field: 'username', title: '用户名', sort: true, filter: true},
{field: 'role', title: '用户角色', filter: true},
{field: 'ascriptionid', title: '归属', filter: true},
// {field: 'type', title: '类型', width: 112, filter: {split:','}, sort:true},
// {field: 'heat', title: '点赞数', width: 112, filter: true, sort:true},
{field: 'joindate', title: '加入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true}
]]
,done: function () {
soulTable.render(this)
}
, limit: 10 // 当前页数
, limits: [10, 30, 50, 100, 200, 500, 1000, 5000, 10000, 20000, 50000]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
var result;
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
} else {
result = res.data.slice(0, this.limit);
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
}
});
table.on('tool(toolbar)', function (obj){
console.log('tool')
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
//同步更新缓存对应的值
obj.update({
author: '123'
,title: 'xxx'
});
}
})
})
</script>
<style>
</style>
</body>
</html>
- 上面代码不全自行修改
- 这种就是在父表的某一条数据中，放一个子表
- 那么数据出来了，我们怎么获取当中的某一个数据呢
- 父表的数据与正常的取值无异，我主要说的是子表的工具条
- 子表工具条有个监听事件
toolbarEvent: function (obj) {
// obj 当前行对象
if (obj.event === 'reload') {
table.reload(this.id)
layer.msg('重载成功！')
}
}
- 这个在父表同样适用
- 在Layui官网可以知道多选框的值可以使用一下代码取
var checkStatus = table.checkStatus('数据表格的id');
- 哪展开的子表可不可以呢，可以，但是id不可在子表写id，如：
<table id="myTable4" lay-filter="myTable4"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<a class="layui-btn layui-btn-xs" lay-event="batchzr">批量转让</a>
</div>
</script>
<script>
// 自定义模块
layui.config({
base: '../../static/layui/ext/', // 模块目录
version: 'v1.6.0'
}).extend({ // 模块别名
soulTable: 'soulTable'
});
layui.use(['form', 'table','soulTable'], function () {
var table = layui.table,
soulTable = layui.soulTable;
table.render({
elem: '#myTable4'
,url: '#'
,toolbar: '#toolbar'//工具条
,page: true
,id:'aa'//父表id
,height: 800
,cols: [[
{type: 'checkbox'},
{title: ' ', width: 50, icon: ['layui-icon layui-icon-triangle-r', 'layui-icon layui-icon-triangle-d'], children:[
{
title: '团长'
,url: function(row){
console.log(row)
return 'chiefdata?userid='+row.userid;
}
,height: 500
,toolbar: '#toolbarDemo'//工具条
,id:'dd'
,page: true
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field: 'userid', title: '用户ID', sort: true, filter: true},
{field: 'username', title: '用户名', sort: true, filter: true},
{field: 'eferencesid', title: '所属业务员', filter: true},
{field: 'power', title: '权力', filter: true},
{field: 'joindate', title: '加入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true}
]]
,done: function () {
soulTable.render(this);
}
, limit: 10 // 当前页数
, limits: [10, 30, 50, 100, 200, 500, 1000, 5000, 10000, 20000, 50000]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
var result;
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
} else {
result = res.data.slice(0, this.limit);
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
},
toolbarEvent: function (obj, pobj) {
var check = table.checkStatus('dd');//这是错误的写法
console.log(this.id);
console.log(check);
console.log(check.data);
console.log(obj);
// obj 当前行对象
if (obj.event === 'batchzr') {
layer.msg('重载成功！')
}
}
}
]},
{field: 'userid', title: '用户ID', sort: true, filter: true},
{field: 'username', title: '用户名', sort: true, filter: true},
{field: 'role', title: '用户角色', filter: true},
{field: 'ascriptionid', title: '归属', filter: true},
{field: 'joindate', title: '加入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true}
]]
,done: function () {
soulTable.render(this)
}
, limit: 10 // 当前页数
, limits: [10, 30, 50, 100, 200, 500, 1000, 5000, 10000, 20000, 50000]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
var result;
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
} else {
result = res.data.slice(0, this.limit);
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
}
});
table.on('tool(toolbar)', function (obj){
console.log('tool')
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
//同步更新缓存对应的值
obj.update({
author: '123'
,title: 'xxx'
});
}
})
})
</script>
- 用上面的id是取不到多选框的值的，因为子表和父表同属一个容器，但是却是两个表
- 那么，我们可以使用
toolbarEvent: function (obj, pobj) {
var check = table.checkStatus(this.id);
console.log(this.id);
console.log(check);
console.log(check.data);
console.log(obj);
// obj 当前行对象
if (obj.event === 'batchzr') {
layer.msg('重载成功！')
}
}
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
