layui-table的父子表
需要定义自定义模块
<script>
// 自定义模块
layui.config({
base: '../../assets/layui/tables/', // 模块目录
version: 'v1.6.0'
}).extend({ // 模块别名
soulTable: 'tableChild'
});
//定义控件
layui.use(['table', 'laydate', 'layer', 'form', 'upload', 'element', 'tableChild'], function () {
var table = layui.table;
var layer = layui.layer;
var laydate = layui.laydate;
var $ = layui.$,
tableChild = layui.tableChild,
form = layui.form;;
//发票查询事件
$('#_submit_zhu').on('click', function () {
var type = $(this).data('type');
console.log(type);
active[type] ? active[type].call(this) : '';
});
var active = {
reload: function () {
//执行重载
table.reload('invoiceinfo', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
"request_service": "InvoiceHandle",
"request_item": "InvoiceInfo",
"login_type": loginType,
"data": {
"购方名称": $("#购方名称").val(),
"发票号": $("#发票号").val(),
"销方名称": $("#供应商").val(),
"开票日期开始": $("#kprqs").val(),
"开票日期结束": $("#kprqe").val(),
"录入状态": $("#录入状态").val(),
"税务认证状态": $("#税务状态").val(),
"发票类型": $("#发票类型").val(),
"内部": $("#内部").is(":checked")
},
"token": key
}
}, 'data');
}
};
//获取未到票信息
function UninvoiceInfo(入库起始日期, 入库结束日期, 部门, 销方名称, 购方名称, 本人名下, 模糊, 采购未到票, 采购人ID) {
table.render({
url: core.path,//相对应的esb接口地址
elem: '#weidaopiaoInfo',
contentType: 'application/json',
datatype: 'json',
request: {
pageName: 'page_index', //页码的参数名称，默认：page
limitName: 'page_size' //每页数据量的参数名，默认：limit
},
page: true,
where: {
"request_service": "InvoiceHandle",
"request_item": "SummaryOfNonArrivalTickets",
"login_type": loginType,
"data": {
"日期开始": 入库起始日期,
"日期结束": 入库结束日期,
"市场ID": 部门,
"销方名称": 销方名称,
"购方名称": 购方名称,
"本人名下": 本人名下,
"模糊匹配": 模糊,
"采购未到票": 采购未到票,
"采购人ID": 采购人ID,
},
"token": core.token
},
cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
method: 'post', //提交方式
cols: [[
{
title: '#', width: 50, children: function (row) {
return [
{
title: '未到票明细'
, url: core.path
, contentType: 'application/json'
, datatype: 'json'
, method: 'post' //提交方式
, height: 300
, limits: [5, 10, 20]
, limit: 5
, request: {
pageName: 'page_index', //页码的参数名称，默认：page
limitName: 'page_size' //每页数据量的参数名，默认：limit
}
, where: {
"request_service": "InvoiceHandle",
"request_item": "SummaryOfNonArrivalTicketsDetail",
"login_type": loginType,
"data": {
"日期开始": 入库起始日期,
"日期结束": 入库结束日期,
"销方名称": row.销方名称,
"购方名称": row.购方名称,
"采购未到票": 采购未到票,
},
"token": core.token
}
, page: true
, cols: [[
{ type: 'checkbox', fixed: 'left' },
{ field: '审核剩余时间', title: '审核剩余时间', width: 200, sort: true, filter: true },
{ field: '发票无法取得', title: '发票无法取得', width: 100, sort: true, filter: true },
{ field: '预计到票时间', title: '预计到票时间', width: 165, filter: true },
{ field: '未到票备注', title: '未到票备注', width: 123, filter: true },
{ field: '预计审核时间', title: '预计审核时间', width: 112, filter: { type: 'date[yyyy-MM-dd HH:mm:ss]' }, sort: true },
{ field: '审核备注', title: '审核备注', width: 112, filter: true, sort: true },
{ field: '销方名称', title: '销方名称', width: 165, sort: true },
{ field: '购方名称', title: '购方名称', width: 112, filter: true, sort: true },
{ field: '货物', title: '货物', width: 112, filter: true, sort: true },
{ field: '型号', title: '型号', width: 112, filter: true, sort: true },
{ field: '入库日期', title: '入库日期', width: 112, filter: true, sort: true },
{ field: '欠票数量', title: '欠票数量', width: 112, filter: true, sort: true },
{ field: '单价', title: '单价', width: 112, filter: true, sort: true },
{ field: '总成本', title: '总成本', width: 112, filter: true, sort: true },
{ field: '业务员ID', title: '业务员', width: 112, filter: true, sort: true },
{ field: '业务员', title: '业务员', width: 112, filter: true, sort: true },
{ field: '下单人ID', title: '下单人', width: 112, filter: true, sort: true },
{ field: '明细号', title: '明细号', width: 112, filter: true, sort: true },
{ field: '入库类型', title: '入库类型', width: 112, filter: true, sort: true },
{ field: 'PartTypeID', title: 'PartTypeID', width: 112, filter: true, sort: true },
{ field: 'PartTypeValue', title: 'PartTypeValue', width: 112, filter: true, sort: true },
{ field: 'InStorageRootID', title: 'InStorageRootID', width: 112, filter: true, sort: true },
{ field: 'SourceType', title: 'SourceType', width: 112, filter: true, sort: true },
]]
, done: function () {
}
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.status_code == 200 ? 0 : 1,
"msg": res.msg,
"count": res.data.count,
"data": res.data.data,
"loginfo": res.data.Loginfo
};
},
}
]
}
},
{ field: '销方名称', title: '销方名称', sort: true },
{ field: '购方名称', title: '购方名称', sort: true },
{ field: '总成本', title: '总成本', sort: true },
{ field: '三个月内', title: '三个月内', sort: true },
{ field: '三到六个月', title: '三到六个月', sort: true },
{ field: '六个月以上', title: '六个月以上', sort: true },
//{ fixed: 'right', width: 70, align: 'center', toolbar: '#barInvoice' }
]],
parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.status_code == 200 ? 0 : 1,
"msg": res.msg,
"count": res.data.count,
"data": res.data.data,
"loginfo": res.data.Loginfo,
"colnams": res.data.colnams
};
},
done: function (res, curr, count) {
tableChild.render(this);
},
error: function (data) {
location.href = './login.html'
}
});
}
});
</script>
如下图：
tableChild.js文件下载地址：https://blog-static.cnblogs.com/files/blogs/680325/tableChild.js
或者参考：layui-soul-table官网 https://saodiyang.gitee.io/layui-soul-table/#/zh-CN/component/changelog
