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)} &nbsp;&nbsp;&nbsp;品种数：{:floatval($row.pre_goods_number)} &nbsp;&nbsp;&nbsp;总重量(kg)：{:floatval($row.pre_goods_weight_number)} &nbsp;&nbsp;&nbsp;总体积(m3)：{:floatval($row.pre_goods_volumn_number)} &nbsp;&nbsp;&nbsp;总数量：{:floatval($row.pre_goods_account)} &nbsp;&nbsp;&nbsp;总件数：{: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 + '&nbsp;&nbsp;&nbsp;' +'拣货单日期：' + tableInfo.create_time_text + '&nbsp;&nbsp;&nbsp;' +'收货单位(人)：' + tableInfo.delivery_people + '&nbsp;&nbsp;&nbsp;' +'送货地址：' + tableInfo.provice +'&nbsp;&nbsp;&nbsp;' + tableInfo.city + '&nbsp;&nbsp;&nbsp;' + tableInfo.area + '&nbsp;&nbsp;&nbsp;' + 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>

页面效果图示：