需求背景
一个存单列表页,要求双击行数据弹出单条存单详情,详情页可单独打印成表格用于交接签字。
贴出源码
存单列表页:
<div class="nui-fit">
<div id="depositGrid" class="nui-datagrid" style="width:100%;height:100%;" pagesize="20"
url="${basePath}/hex/deposit/index" multiSelect="true" allowResize="false" ajaxData="pms.getAjaxData('queryForm')"
onrowdblclick="deposit.detailOnDbClick" onselectionchanged="pms.selectionChanged('depositGrid', '${user.userId}')" totalField="page.totalCount">
<div property="columns">
<div type="checkcolumn" headerAlign="center" align="center" width="30"></div>
<div field="productName" headerAlign="center" width="175">产品名称</div>
<div field="accountName" headerAlign="center" width="135">托管户名</div>
<div field="accountNo" headerAlign="center" width="100">托管账号</div>
<div field="depositNo" headerAlign="center" width="100">存单编号</div>
<div field="depositName" headerAlign="center" width="120">存单户名</div>
<div field="depositAccount" headerAlign="center" width="100">存单账号</div>
<div field="depositTypeContent" headerAlign="center" width="100">存单类型</div>
<div field="isPayContent" headerAlign="center" width="80" align="center">是否已兑付</div>
<div field="creatorName" headerAlign="center" align="center" width="100">创建人</div>
<div field="createDate" dateFormat="yyyy-MM-dd" headerAlign="center" align="center" width="80">创建日期</div>
<div field="endDate" dateFormat="yyyy-MM-dd" headerAlign="center" align="center" width="80">到期日</div>
<div field="planDate" dateFormat="yyyy-MM-dd" headerAlign="center" align="center" width="80">计划支取日</div>
</div>
</div>
</div>
双击查看详情:
deposit.detailOnDbClick = function(e){
if(!e.row){
return;
}
var row = e.row;
var url = window.v_contextPath + '/goframe/func/deposit.detail?pkId=' + row.pkId;
window.parent.showTab(url, 'detailDeposit', '查看存单详情', true, function () {
pms.loadGridData(e.sender.id);
}, function () {
});
};
详情页
${extends("/pms/base/detail.httl")}
<!--#macro(formTitle)-->
存单详情
<!--#end-->
<!--#macro(formDetail)-->
${include("/deposit/base.httl")}
<!--#end-->
<!--#macro(javascript)-->
<script type="text/javascript" src="${basePath}/s/js/hexDeposit.js"></script>
<script type="text/javascript">
require(['nui','jquery'], function (nui, $) {
nui.parse();
deposit.initDetailPage('${pkId}');
nui.get('printBtn').show();
});
/**
* 打印
*/
function onPrint(){
deposit.openPrint();
}
</script>
<!--#end-->
初始化详情
deposit.initDetailPage = function (pkId) {
var json = {'pkId':pkId};
json = nui.encode(json);
var url = window.v_contextPath + '/hex/deposit/getDepositById';
pms.post(url, json, function(data){
pms.underlineWithDetail('depositForm');
deposit.setFormData('depositForm', data);
});
};
设置表单数据:
deposit.setFormData = function(formId, row){
if(row.amount){
row.amount = commafy(row.amount);
}
pms.setFormData(formId, row);
if(row.productName){
nui.get('productId').setText(row.productName);
}
if(row.orgName){
nui.get('orgId').setText(row.orgName);
}
};
打印
deposit.print = function(){
//绑定数据
deposit.bindData();
var innerHTML = '<div align="center" style="font-size: 16px;font-weight: bold;">存单详情</div>';
var depositForm = $('#depositForm').html();
depositForm = '<div id="depositForm" style="width: 96%;margin-left: auto;margin-right: auto;">' + depositForm + '</div>';
innerHTML += depositForm;
document.body.innerHTML = innerHTML;
window.print();
CloseWindow('ok');
};
调用window.print()进行打印时,详情表里填写的数据并没有获取到,原因就是innerHTML不包含数据。
为了解决这问题,应该在innerHTML之前把所有填写的数据都先赋值。
绑定数据:
deposit.bindData = function(){
//搞定 type=text, 同时如果checkbox,radio,select>option的值有变化, 也绑定一下, 这里忽略button
$("input,select option").each(function(){
$(this).attr('value',$(this).val());
});
//搞定 type=checkbox,type=radio 选中状态
$("input[type='checkbox'],input[type='radio']").each(function(index, element){
if(element.checked){
$(this).attr('checked', true);
}else{
$(this).removeAttr('checked');
}
});
};
参考博文:http://blog.csdn.net/dream_broken/article/details/52639653