打印预览页面，增加可选择式打印选择。类似的功能之前做过一个，那个是在打印预览之前就弹出窗口进行选择打印内容，再根据选择的内容将html传到打印预览页面，其中还涉及部分无法直接通过html传递的内容，还需要重新生成。那个功能的场景是，已有数据页面，没有打印预览页面，要对若干项数据页面进行可选择式打印。详情请看 可选择式前端打印，window.print() 。而本次的功能场景不同，已有打印预览页面了，只是其中内容非常多，针对不同的用户，需要打印的内容不同，根据需要选择部分内容进行打印。
一、场景需求
打印内容包含若干项，标题，基础信息，标准要求表，回归检查表，检查内容填写表，并且检查内容填写表中有很多科室，科室也可以选择。
二、效果展示
选择打印内容界面
选择指定内容后的打印预览界面
三、实现方式
1、思路
a、给需要进行区分的项目的DIV添加id。如标题，基本信息，标准要求，回归检查，检查内容填写。
b、给检查内容填写表的科室td添加样式，deptName,deptNameHide。一个用于获取选择项的显示。进行内容处理时，两个都需要用到。
c、调用打印时，生成可选择项内容，并添加选择事件处理。此处使用到了semantic ui的复选框，有全选功能设置，以及回归检查复选框和科室复选框的逻辑控制。检查内容表未选时，科室不可选。检查内容表选中时，默认选中全部的科室。
d、操作选项时，生成临时数组用于记录选中项。
e、确认打印时，先给全部选项，包括科室，添加打印不显示样式。再根据临时数组，判断，给需要显示的项目去除掉打印不显示的样式。
f、添加表格线条样式，调用window.print()打印。
g、打印窗口关闭，恢复表格线条样式。
2、@media print的使用
@media print {
.noprint,.noprint1{
display: none !important;
}
}在@media print中的样式，只有在调用window.print()打印时，才会生效。所以可以使用该样式灵活控制打印内容，而不需要删除html代码，或添加其他样式影响正常预览界面显示效果。
3、源码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<#include "./common.html" />
<style type="text/css">
@media print {
.noprint,.noprint1{
display: none !important;
}
}
.tableLine{
border-top: 1px solid #000000 !important;
border-right:1px solid #000000 !important;
border-collapse:collapse !important;
}
.tdLine{
border-left: 1px solid #000000 !important;
border-bottom:1px solid #000000 !important;
border-collapse:collapse !important;
}
.layui-table-cell {
min-height: 28px;
height: initial;
}
.layui-table-cell, .layui-table-tool-panel li {
white-space: initial;
}
.layui-table-view .layui-table {width:100%}
</style>
</head>
<body>
<!-- 标题 -->
<h1 style="text-align: center;margin-bottom: 10px" id="H1title"></h1>
<div style="width: 98%;margin: 5px auto" id="checkContenttable">
<!-- 基本信息 -->
<div id="checkInfo"></div>
<!-- 检查标准要求部分 -->
<div id="checkRequireDiv">
<div class="inline fields" id="checkContentDiv">
<div style="width:100%">
<div style="display: inline-block;font-weight: 1000;">检查内容表:</div>
</div>
</div>
<table class="ui selectable celled compact table" style="width: 100%" id="my-table">
<thead>
<tr>
<th>项目</th>
<th id="show2">分值</th>
<th style="width:45%">检查内容</th>
<th style="width:30%">备注</th>
<th id="show3">各项得分</th>
</tr>
</thead>
<tbody class="ui mini form" id="tbody"></tbody>
</table>
</div>
<!-- 回归问题部分 -->
<div id="regressionDiv">
<!-- 添加循环问题 -->
<div class="inline fields" style="display:none" id="checkTitleDiv">
<div style="width:100%">
<div style="display: inline-block;font-weight: 700;">PDCA回归检查项目表:</div>
</div>
</div>
<table class="ui selectable celled compact table" style="width: 100%" id="regressionCheckTable">
<thead>
<tr>
<th>序号</th>
<th>科室</th>
<th>检查项目</th>
<th>检查标准</th>
<th>上次检查整改问题说明</th>
<th>检查结果</th>
</tr>
</thead>
<tbody class="ui mini form" id="tbody3"></tbody>
</table>
</div>
</div>
<!-- 检查内容部分 -->
<div style="width: 98%;margin: 0 auto;margin-bottom:60px;" id="checkInfotable" >
<h3 style="text-align: center;margin-bottom: 10px" id="h12"></h3>
<table class="ui selectable celled compact table" style="width: 100%">
<thead>
<tr>
<th style="width: 100px">科室</th>
<th id="itemTh" style="display:none;width:12%">项目</th>
<th >存在问题</th>
<th id="scoreTh" style="display:none;width:10%">分值</th>
<th style="width: 110px">值班护士签名</th>
</tr>
</thead>
<tbody class="ui mini form" id="tbody2"></tbody>
</table>
</div>
<!-- 打印按钮 -->
<div class="bottomFixButton noprint1">
<a class="ui tiny orange button" onclick="selectPrintContent()" >打印</a>
<a class="ui tiny button" id="cancleBtn">关闭</a>
</div>
</body>
<script type="text/javascript">
function point(){
$("td").addClass("tdLine");
$("table").addClass("tableLine");
$("th").addClass("tdLine");
window.print();
$("td").removeClass("tdLine");
$("table").removeClass("tableLine");
$("th").removeClass("tdLine");
}
/**
* 选择打印内容
*/
function selectPrintContent(){
var deptNameList=new Array();
$("#checkInfotable #tbody2 td.deptName").each(function(){
deptNameList.push($(this).html());
});
//生成列表选项卡
var htmlContent='<div class="ui form mini" style="margin:5px 5px 10px 5px;">';
htmlContent+= '<div class="wide field">';
htmlContent+= '<label style="font-size:16px">打印选项</label>';
htmlContent+= '<div class="ui checkbox" name="optionContent" style="margin-top:10px;margin-left:20px;">';
htmlContent+=' <input type="checkbox" name="optionContentInput" tabindex="0" value="title" checked class="hidden">';
htmlContent+= '<label>标题项</label>';
htmlContent+= '</div>';
htmlContent+= '<div class="ui checkbox" name="optionContent" style="margin-top:10px;margin-left:20px;">';
htmlContent+=' <input type="checkbox" name="optionContentInput" tabindex="0" value="base" checked class="hidden">';
htmlContent+= '<label>基本信息表</label>';
htmlContent+= '</div>';
htmlContent+= '<div class="ui checkbox" name="optionContent" style="margin-top:10px;margin-left:20px;">';
htmlContent+=' <input type="checkbox" name="optionContentInput" tabindex="0" value="require" checked class="hidden">';
htmlContent+= '<label>检查标准要求表</label>';
htmlContent+= '</div>';
htmlContent+= '<div class="ui checkbox" name="optionContent" style="margin-top:10px;margin-left:20px;">';
htmlContent+=' <input type="checkbox" name="optionContentInput" tabindex="0" value="regression" checked class="hidden">';
htmlContent+= '<label>回归检查表</label>';
htmlContent+= '</div>';
htmlContent+= '<div class="ui checkbox" name="optionContent" style="margin-top:10px;margin-left:20px;">';
htmlContent+=' <input type="checkbox" name="optionContentInput" tabindex="0" value="check" checked class="hidden">';
htmlContent+= '<label>检查内容填写表</label>';
htmlContent+= '</div>';
htmlContent+= '</div>';
htmlContent+= '<div class="wide field" style="">';
htmlContent+= '<label style="font-size:16px">打印科室</label>';
htmlContent+= '<div class="ui checkbox deptNameSelectAll" style="margin-top:10px;margin-left:20px;font-weight:600"><input type="checkbox" name="deptNameSelectAll" tabindex="0" checked class="hidden"><label>全选</label></div><br/>';
for(var i=0;i<deptNameList.length;i++){
htmlContent+= '<div class="ui checkbox" name="optionDeptName" style="margin-top:10px;margin-left:20px;">';
htmlContent+=' <input type="checkbox" name="optionDeptNameInput" tabindex="0" value="'+deptNameList[i]+'" checked class="hidden">';
htmlContent+= '<label>'+deptNameList[i]+'</label>';
htmlContent+= '</div>';
}
htmlContent+= '</div>';
htmlContent+='</div>';
var infoSelectArray=new Array();
var deptNameSelectArray=new Array();
parent.layer.confirm(htmlContent, {
title:'请选择打印内容',
skin:"qualityCheckImplementPrintLayer",
btn: ['确定','取消'], //按钮
success: function(layero, index){
$(".ui.checkbox[name='optionDeptName']",window.parent.document).each(function(){
deptNameSelectArray.push($(this).children().eq(0).val());
});
$(".ui.checkbox[name='optionContent']",window.parent.document).each(function(){
infoSelectArray.push($(this).children().eq(0).val());
});
$(".ui.checkbox",window.parent.document).checkbox({
onChange: function() {
infoSelectArray=[];
deptNameSelectArray=[];
//选项数组
$(".ui.checkbox[name='optionContent']",window.parent.document).each(function() {
var classStr=$(this).attr("class");
if($(this).checkbox('is checked') ) {
infoSelectArray.push($(this).children().eq(0).val());
}
}
);
//如果当前点击的是检查内容填写表
if($(this).val()=="check"){
$(".ui.checkbox[name='optionDeptName']",window.parent.document).checkbox('set unchecked');
if(($(this).parent().checkbox('is checked') && !$(".ui.checkbox.deptNameSelectAll",window.parent.document).checkbox('is checked'))
|| (!$(this).parent().checkbox('is checked') && $(".ui.checkbox.deptNameSelectAll",window.parent.document).checkbox('is checked'))
){
//触发点击
$(".ui.checkbox.deptNameSelectAll",window.parent.document).click();
}
}
//如果当前选择的是科室 当前是勾选状态，并且当前未勾选检查内容填写表
if($(this).attr("name")=="optionDeptNameInput" && !$($(".ui.checkbox[name='optionContent']",window.parent.document)[4]).checkbox('is checked') && $(this).parent().checkbox('is checked')){
//设置取消勾选
$(this).parent().checkbox('set unchecked');
}
var $checkbox = $(".ui.checkbox[name='optionDeptName']",window.parent.document);
var dept_count=0;
var dept_names="";
var dept_ids="";
if($(this).attr("name")=='deptNameSelectAll'&&$(this).parent().checkbox('is checked')){
$checkbox.each(function() {
$(this).checkbox('set checked');
})
}else if($(this).attr("name")=='deptNameSelectAll'&&!$(this).parent().checkbox('is checked')){
$checkbox.each(function() {
$(this).checkbox('set unchecked');
});
}
var flag=true;
$checkbox.each(function() {
var classStr=$(this).attr("class");
if($(this).checkbox('is checked') ) {
deptNameSelectArray.push($(this).children().eq(0).val());
}else{
flag=false;
}
});
if(flag){
$(".deptNameSelectAll",window.parent.document).checkbox('set checked');
}else{
$(".deptNameSelectAll",window.parent.document).checkbox('set unchecked');
}
},
});
}
}, function(){
//首先给全部内容添加打印不显示
//标题项
$("#H1title").addClass("noprint");
//基本信息
$("#checkInfo").addClass("noprint");
//标准要求
$("#checkRequireDiv").addClass("noprint");
//回归检查
$("#regressionDiv").addClass("noprint");
//检查内容表
$("#checkInfotable").addClass("noprint");
//科室项
$("#tbody2 tr").addClass("noprint");
//再根据选择项去除显示项的打印不显示
for(var i=0;i<infoSelectArray.length;i++){
var info=infoSelectArray[i];
if("title"==info){
$("#H1title").removeClass("noprint");
}else if("base"==info){
$("#checkInfo").removeClass("noprint");
}else if("require"==info){
$("#checkRequireDiv").removeClass("noprint");
}else if("regression"==info){
$("#regressionDiv").removeClass("noprint");
}else if("check"==info){
$("#checkInfotable").removeClass("noprint");
}
}
//去除科室的打印不显示
for(var i=0;i<deptNameSelectArray.length;i++){
var deptName=deptNameSelectArray[i];
$("#tbody2 .deptName[deptname='"+deptName+"']").parent().removeClass("noprint");
$("#tbody2 .deptNameHide[deptname='"+deptName+"']").parent().removeClass("noprint");
}
point();
})
}
/**
* 加载回归检查重点表格
*/
function loadRegressionCheckTable(curPlanId){
$.ajax({
url:basePath +"/qualityCheckPlan/loadRegressionPoints.do",
data:{
curPlanId:curPlanId
},
success:function(msg){
var context = "";
//map项目数据 list
var CheckRegressionList =msg.list;
//表格数据
//mapToplist 遍历项目数据list
for ( var i = 0; i < CheckRegressionList.length; i++) {
var deptName = CheckRegressionList[i].deptName;//科室名称
var checkItem = CheckRegressionList[i].checkItem;//项目名称
var itemRequire = CheckRegressionList[i].itemRequire;//检查标准
var checkInfo = CheckRegressionList[i].checkInfo;//上一次检查整改问题说明
var curMeasureResult = "";//检查结果(自己手填)
context += "<tr><td style='text-align: center'>"+(i+1)+"</td>";
context += "<td style='text-align: center'>"+deptName+"</td>";
context += "<td style='text-align: center'>"+checkItem+"</td>";
context += "<td style='text-align: left'>"+itemRequire+"</td>";
context += "<td style='text-align: left'>"+checkInfo+"</td>";
context += "<td style='text-align: left'>"+curMeasureResult+"</td></tr>";
}
$("#tbody3").html(context);
if(CheckRegressionList.length>0){
//有回归检查问题的数据就显示表格
$("#regressionCheckTable").show();
$("#checkTitleDiv").show();
}else{
//没有回归检查问题的数据就隐藏表格
$("#regressionCheckTable").hide();
$("#checkTitleDiv").hide();
}
}
})
}
function getQueryVariable(variable){
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
$.ajax({
url:basePath +"/quality/prewviewInfoData.do",
data:{
plan_id:getQueryVariable("plan_id")
},
success:function(msg){
$("#H1title").html(msg.list.projectTemplateInfo.template_name);
//$("#h12").html(msg.list.projectTemplateInfo.template_name);
$("#h12").html("检查内容填写表");
var formType = msg.list.formType;
//加载表格(直接加载循环问题的表格)
var plainid = getQueryVariable("plan_id");
//加载表格数据
loadRegressionCheckTable(plainid);
if(formType=="1"){
$("#show1").show();
$("#show2").show();
$("#show3").show();
}else{
$("#show1").hide();
$("#show2").hide();
$("#show3").hide();
}
var context = "";
//map项目数据 list
var mapTop =msg.list.mapToplist;
//mapToplist 遍历项目数据list
for ( var i = 0; i < mapTop.length; i++) {
var item_baseName = mapTop[i].itemBaseInfo.item_name;//项目名称
var item_targetscore = mapTop[i].itemVersion.target_score;//项目目标分数
//要求数据、评分数据
var maplist=mapTop[i].maplist;
var itemContext="";
var index=0;
for ( var j = 0; j < maplist.length; j++) {
var remark=maplist[j].itemRequires.remark;
if(!remark){
remark="";
}
//评分数据
if (j==0) {
itemContext+="<td style=\"text-align: left\">"+maplist[j].itemRequires.require_info+"</td>";
itemContext+="<td>"+remark+"</td>";
if(formType=="1"){
itemContext+="<td>"+maplist[j].itemRequires.score+"</td>";
}
}else{
itemContext+="<tr>";
itemContext+="<td style='display:none'>"+item_baseName+"</td>";
if(formType=="1"){
itemContext+="<td style='display:none'>"+item_targetscore+"</td>";
}
itemContext+="<td style=\"text-align: left\">"+maplist[j].itemRequires.require_info+"</td>";
itemContext+="<td>"+remark+"</td>";
if(formType=="1"){
itemContext+="<td>"+maplist[j].itemRequires.score+"</td>";
}
itemContext+="</tr>";
}
}
index=Number(maplist.length);
context+="<tr>";
context+= "<td rowspan=\""+index+"\">"+item_baseName+"</td>";
if(formType=="1"){
context+= "<td rowspan=\""+index+"\">"+item_targetscore+"</td>";
}
context+= itemContext;
context+= "</tr>";
}
$("#tbody").html(context);
}
})
$.ajax({
url:basePath +"/qualityCheckImplement/checkContentPrintPersonInfo.do",
data:{
planid:getQueryVariable("plan_id")
},
success:function(msg){
var html = "";
html+='<div style="width: 100%;height: 24px">';
html+='<label style="font-weight: 700;float: left;padding-right: 10px">计划时间：</label>';
html+='<div style="float: left">'+msg.data.plan_begin_time+"至"+msg.data.plan_end_time+'</div>';
html+=' </div>';
html+='<div style="width: 100%;height: 24px">';
html+='<label style="font-weight: 700;float: left;padding-right: 10px">计划检查日期：</label>';
if(!msg.data.planCheckDate2 && msg.data.planCheckDate){
//如果结束时间为空，开始时间不为空 默认取开始时间 兼容老数据
html+='<div style="float: left">'+msg.data.planCheckDate+'至'+msg.data.planCheckDate+'</div>';
}else if(msg.data.planCheckDate && msg.data.planCheckDate2){
//都有数据时
html+='<div style="float: left">'+msg.data.planCheckDate+'至'+msg.data.planCheckDate2+'</div>';
}
html+=' </div>';
if(msg.data.checkEndTime && msg.data.checkStartTime){
html+='<div style="width: 100%;height: 24px">';
html+='<label style="font-weight: 700;float: left;padding-right: 10px">检查时间范围：</label>';
html+='<div style="float: left">'+msg.data.checkStartTime+"-"+msg.data.checkEndTime+'</div>'
html+=' </div>';
}
html+='<div style="width: 100%;height: 24px">';
html+='<label style="font-weight: 700;float: left;padding-right: 10px">检查组长：</label>';
html+='<div style="float: left">'+msg.data.leader_name+'</div>'
html+=' </div>';
html+='<div style="width: 100%;height: 24px">';
html+='<label style="font-weight: 700;float: left;padding-right: 10px">检查成员：</label>';
html+='<div style="float: left">'+msg.data.member_name+'</div>'
html+=' </div>';
html+='<div style="width: 100%;height: 24px">';
html+='<label style="font-weight: 700;float: left;padding-right: 10px">检查重点：</label>';
html+='<div style="float: left">'+msg.data.important+'</div>'
html+=' </div>';
$("#checkInfo").html(html);
}
})
/* $(".item").click(function(){
$(".item").removeClass("active");
$(this).addClass("active")
if($(this).attr("data-type")=="1"){
$("#checkContenttable").show();
$("#checkInfotable").hide();
}else{
$("#checkInfotable").show();
$("#checkContenttable").hide();
}
}) */
$.ajax({
type: "POST",
dataType: "json",
url: basePath + "/qualityCheckImplement/refreshDeptImplement.do",
data: {
planId:getQueryVariable("plan_id")
},
success: function (msg) {
//科室项目map
var itemMap=msg.itemMap;
//表单类型 1打分制 2填空制
var formType=msg.formType;
if(1==formType){
$("#scoreTh").show();
$("#itemTh").show();
}else{
$("#scoreTh").hide();
$("#itemTh").hide();
}
var html ="";
if(msg.mapList.alreadyCheck!=null){
html=createHtml(msg.mapList.alreadyCheck,formType,itemMap);
}
if(msg.mapList.waitCheck!=null){
html=createHtml(msg.mapList.waitCheck,formType,itemMap);
}
if(msg.mapList.draftCheck!=null){
html=createHtml(msg.mapList.draftCheck,formType,itemMap);
}
$("#tbody2").html(html)
}
})
//创建html
function createHtml(data,formType,itemMap){
var html="";
if(data){
for(i=0;i<data.length;i++){
//打分制
if(1==formType){
var itemCount=0;
for(var m in itemMap){
itemCount++;
}
var index=0;
//根据项目数遍历
for(var m in itemMap){
index++
//第一条时，增加rowspan值设置
if(index==1){
html+='<tr style="height: 50px">';
html+='<td align="center" rowspan="'+itemCount+'" class="deptName" deptName="'+data[i].dept_name+'">'+data[i].dept_name+'</td>'
html+='<td>'+itemMap[m]+'</td>';
html+='<td></td>';
html+='<td></td>';
html+='<td rowspan="'+itemCount+'"></td>';
html+='</tr>';
}else{
//其他数据，隐藏合并行列
html+='<tr style="height: 50px">';
html+='<td style="display:none" class="deptNameHide" deptName="'+data[i].dept_name+'">'+data[i].dept_name+'</td>'
html+='<td>'+itemMap[m]+'</td>';
html+='<td></td>';
html+='<td></td>';
html+='<td style="display:none"></td>';
html+='</tr>';
}
}
//填空制
}else{
html+='<tr style="height: 50px">';
html+='<td align="center" class="deptName" deptName="'+data[i].dept_name+'">'+data[i].dept_name+'</td>'
html+='<td></td>';
html+='<td></td>';
html+='</tr>';
}
}
}
return html;
}
//取消
$("#cancleBtn").on('click', function() {
var varindex=parent.layer.getFrameIndex(window.name);
parent.layer.close(varindex);
});
</script>
</html>
还没有评论，来说两句吧...