TP5 动态渲染多个Layui表格并批量打印所有表格
记录：
- TP5 动态渲染多个Layui表格
- 每个表格设置有2行表头，并且第一行表头在页面完成后动态渲染显示内容
- 每个表格下面显示统计信息
- 可点击字段排序
- 一次打印页面上的所有表格
- 打印页面上多个table时,让每个table单独一页
后端代码示例：
/**
* @NodeAnotation(title="批量打印")
*/
public function mergePrint($id)
{
$rlist = $this->model->where([['id','in',$id]])->select();
$tablesData = [];
foreach($rlist as $k=>$row){
//拣货商品明细
$goodsList= $row->boutboundPickGoods;
// 排序：首先拣货位正序、其次商品ID正序、最后批次倒序
array_multisort(array_column($goodsList, 'jianhuo_location'), SORT_ASC, array_column($goodsList, 'id'), SORT_ASC, array_column($goodsList, 'pici'), SORT_DESC, $goodsList);
$row['goodsList'] = $goodsList;
$row['create_time_text'] = date('Y-m-d',$row['create_time']);
$tablesData[] = $row->toArray();
}
$this->assign('tablesData', $tablesData);
return $this->fetch();
}
html代码示例：
<style>
fieldset {
padding: 0;
border: none;
border-top: 1px dashed #eee;
}
fieldset legend {
margin-left: 30px;
padding: 0 10px;
font-size: 16px;
font-weight: 500;
}
</style>
<div class="layuimini-container">
<form id="app-form" class="layui-form layuimini-form">
<fieldset>
<legend>
<a name="other">拣货商品详情</a>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm print_apple" lay-event="add"><i class="fa fa-print"></i> 批量打印</button>
</legend>
</fieldset>
<!-- 要拣货的商品 -->
<div class="printContent">
<div class="tablestyle">
<style>
.layui-table td, .layui-table th{
font-size: 12px;
color: #000;
padding: 5px;
}
.printMain{
font-size: 12px;
color: #000;
}
.title{
background-color: #fff;
text-align: left;
}
/* layui 打印页面上多个table时,让每个table单独一页 */
@media print {
.layui-card {
page-break-after: always;
}
.layui-card:last-child {
page-break-after: auto;
}
table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
}
</style>
</div>
<div class="printMain">
{volist name="tablesData" key="index" id="row"}
<div class="layui-card">
<table class="layui-table layui-table-main" id="table-{$row['id']}" style="margin: 0;"></table>
<div style='line-height:40px;'>
总合计：
出库单数量：{:floatval($row.yck_number)}
品种数：{:floatval($row.pre_goods_number)}
总重量(kg)：{:floatval($row.pre_goods_weight_number)}
总体积(m3)：{:floatval($row.pre_goods_volumn_number)}
总数量：{:floatval($row.pre_goods_account)}
总件数：{:floatval($row.pre_goods_jian_number)}
</div>
<div style="height: 30px;">
<div style='float: left;margin-right:120px'>制单人：</div>
<div style='float: left;margin-right:120px'>拣货人：</div>
</div>
</div>
{/volist}
</div>
</div>
</form>
</div>
<script src="__STATIC__/jquery.min.js?v={$version}" charset="utf-8"></script>
<script>
//JavaScript代码区域
layui.use(['element', 'table', 'form'], function () {
var element = layui.element,
table = layui.table
, form = layui.form
,laydate = layui.laydate;
var tablesData = {:json_encode($tablesData)};
// 循环渲染每个表格
tablesData.forEach(function(tableInfo) {
// 初始化表格
table.render({
elem: '#table-' + tableInfo.id,
toolbar: '#toolbar',
defaultToolbar: ['filter'], //开启右边按钮
cols: [
// 第一行表头
[
{field: 'fdsf', title: '标题'+tableInfo.id, colspan:14},
],
// 第二行表头
[
{field: 'id', width: 90, title: '商品ID', sort: true},
{field: 'xuhao', width: 80, title: '序号', sort: true},
{field: 'title_en', minWidth: 120, title: '英文简称', sort: true},
{field: 'title', minWidth: 120, title: '商品名称', sort: true},
{field: 'tuo_guige', minWidth: 100, title: '码托件数', sort: true},
{field: 'ji_guige', minWidth: 110, title: '件计量规格', sort: true},
{field: 'ware_location', minWidth: 100, title: '库位', sort: true},
{field: 'is_jianhuo_location', minWidth: 110, title: '是否拣货位', sort: true,
templet: function (d) {
if(d.is_jianhuo_location == 1){
return '<span style="color:#1e9fff;">是</span>';
}else{
return '<span >否</span>';
}
}
},
{field: 'is_zhengban', minWidth: 100, title: '整板', sort: true,
templet: function (d) {
if(d.is_zhengban == 1){
return '<span style="color:#1e9fff;">是</span>';
}else{
return '<span >否</span>';
}
}
},
{field: 'pici', minWidth: 100, title: '批次号', sort: true},
{field: 'actual_number', minWidth: 100, title: '数量', sort: true},
{field: 'jian_number', minWidth: 100, title: '件数', sort: true},
{field: 'jianhuo_location', minWidth: 100, title: '拣货位', sort: true},
{field: 'jianhuo_area', minWidth: 110, title: '拣货位库区', sort: true},
]
],
data:tableInfo.goodsList,
page: false, // 如果需要分页
limit: Number.MAX_VALUE,
done: function (res, curr, count) {
// 组合第一行表头显示的内容
var htmltext = '拣货单号：' + tableInfo.jh_order + ' ' +
'拣货单日期：' + tableInfo.create_time_text + ' ' +
'收货单位(人)：' + tableInfo.delivery_people + ' ' +
'送货地址：' + tableInfo.provice +' ' + tableInfo.city + ' ' + tableInfo.area + ' ' + tableInfo.delivery_address;
// 赋值第一行表头显示的内容
$("[lay-id=\"table-" + tableInfo.id + "\"] .layui-table-box .layui-table-header tr:first-child").find('th').html(htmltext);
// 更换第一行表头样式
$("[lay-id=\"table-" + tableInfo.id + "\"] .layui-table-box .layui-table-header tr:first-child").css({
"background-color":"#fff",
});
$("[lay-id=\"table-" + tableInfo.id + "\"] .layui-table-box .layui-table-header tr:first-child").find('th').css({
"text-align":"left",
});
// 设置tool的层级，不被下面的table遮盖，注意上面的table的层级要高于下面table的层级
$("[lay-id=\"table-" + tableInfo.id + "\"] .layui-table-tool").css({
"position":"relative",
"z-index":9999-tableInfo.id,
"width":"100%",
"min-height":"50px",
"line-height":"30px",
"padding":"10px 15px",
"border-width":"0",
"border-bottom-width":"1px",
});
},
});
})
// 打印页面上所有表格table
$('.print_apple').click(function(){
// 定义一个DIV存放打印的内容
let v = document.createElement("div");
// 为DIV定义一个class名字
v.className = 'printMain';
// 向DIV中增加样式内容（打印页面上多个table时,让每个table单独一页）
$(v).append($(".tablestyle").html());
// 循环每个表格
tablesData.forEach(function(tableInfo) {
// 组合一个表格要打印的内容
var tablelayid = 'table-' + tableInfo.id;
var card = document.createElement("div");
card.className = 'layui-card';
$(card).append($("[lay-id=\"" + tablelayid + "\"] .layui-table-box").find(".layui-table-header").html());
$(card).find("thead").after($("[lay-id=\"" + tablelayid + "\"] .layui-table-body.layui-table-main table").html());
$(card).find("th.layui-table-patch").remove();
$(card).find(".layui-table-col-special").remove();
$(card).append($("[lay-id=\"" + tablelayid + "\"]").next().html()+$("[lay-id=\"" + tablelayid + "\"]").next().next().html());
// 向打印DIV中增加打印表格内容
$(v).append(card);
});
// 页眉
let f = [`<head>`,
"<style>", "body{font-size: 12px; color: #000;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}",
"th,td{line-height: 18px; padding: 5px 5px; border: 1px solid #ccc; text-align: center;}",
"a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}",
"</style>", "</head>"].join("");
//页脚展示
let footer = [`<footer></footer >`].join("");
// 打印
let h = window.open("打印窗口", "_blank");
h.document.write(f + $(v).prop("outerHTML") + footer);
h.document.close();
h.print();
h.close();
});
})
</script>
页面效果图示：
