需要定義自定義模塊
<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