[抛砖引玉][曲线救国]让表格table支持表头、表尾,且在打印的时候!

分享 未结 精帖 1 377
fxnsky
fxnsky VIP4 2019-8-28
悬赏:20飞吻
一、效果预览
1、数据表格预览效果

2、打印预览效果图

3、实际打印效果

二、为什么这样做?
1、使用table做报表打印功能,不再使用第三方组件;
2、实际需求打印时间需要表头、表尾来附带一些信息;
3、没有在框架中找到实现方案,只能自己DIV曲线行驶(不改框架);
4、时间紧迫,容不得过多考虑和细致方法,仅如此吧;
5、本人非前端开发,思路、实现方式、逻辑等方面有误或更好方案欢迎指证。
三、实现方法
1、由于仅table的thead、tbody、tfoot会被打印,所以只能在这三部分做文章;
2、layui框架刚在渲染时候刚好分开处理了这三部分;
    <div class="layui-table-box">
<div class="layui-table-header">
<table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">
<thead>
......
<div class="layui-table-body layui-table-main">
<table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">
<tbody>
......
3、尝试在layui-table-header下的table的thead增1行作为标题;在layui-table-body的table中增加tfoot作为表尾;
4、在table渲染完成之后进行处理;
四、实现代码
1、增加表头
/**
* 创建打印数据表标题元素
* @param {string} parentID 表格所在父级元素id,特定标识一个table,防止一个页面多个情况
* @param {string} title 标题内容
*/
function TableReportAddHead(parentID, title, subTitle) {
var $ = layui.$;
var tableHead = $(parentID + " .layui-table-header .layui-table thead");
var colLen = $(parentID + " .layui-table-header .layui-table thead tr").eq(0).find("th").length;
var html = '<tr><th colspan="' + colLen + '" style="text-align:center; line-height:28px;"><div class="layui-table-cell"><span style="font-size:16px;">' + title + '</span>';
if (!!subTitle) {
html += '<br/><span>' + subTitle;
}
html += '</span></div></th></tr>';
tableHead.prepend(html);
}
2、增加表尾
/**
* 创建打印数据表表尾元素
* @param {string} parentID 表格所在父级元素id,特定标识一个table,防止一个页面多个情况
* @param {string} patronName 单位名称
* @param {string} optUser 操作员
*/
function TableReportAddFood(parentID, patronName, optUser) {
var $ = layui.$;
var tableBody = $(parentID + " .layui-table-body .layui-table");
var tableHead = $(parentID + " .layui-table-header .layui-table thead tr");
var colLen = tableHead.eq(tableHead.length - 1).find("th").length;
var date = (new Date()).Format("yyyy-MM-dd hh:mm:ss");
var html = '<tfoot class="cust-table-tfoot">';
html += '<tr><td colspan="' + colLen + '"><span>单位:' + patronName + '</span><span style="float:right">打印时间:' + date + '</span></td></tr>';
html += '<tr><td colspan="' + colLen + '"><span>操作员:' + optUser + '</span><span style="float:right">负责人:</span></td></tr>';
html += '</tfoot>';
tableBody.append(html);
}
3、额外处理
打印时候,html内部的样式是丢失的,所以在单元格对齐也丢失了,特殊处理样式:
/**
* 创建打印数据表单元格样式
* @param {string} parentID 表格所在父级元素id,特定标识一个table,防止一个页面多个情况
*/
function TableReportCellAlign(parentID) {
var $ = layui.$;
$(parentID + " .layui-table-body .layui-table tbody td[align]").attr("style", "text-align:center");// 偷懒了,应获其属性.attr("align")
}
五、存在问题
1、首先,这种做法是绝对不严谨或者根本就行错误的,仅以实现为目的;
2、单元格间距、字体大小等样式调整麻烦,本次仅草草实现,不细调整了,耽误时间;
3、翻页时候tfoot有些页面会出现错位情况,再做处理吧,如果有时间;
4、表头和表尾目前在表格线内部,强迫症接下来会调整样式,让暴漏出来,仅数据在表格中;
5、希望能有更好的标准实现方案,或框架对此更好的支持,毕竟一个系统离不开一个报表功能;
回帖