一个存单列表页,要求双击行数据弹出单条存单详情,详情页可单独打印成表格用于交接签字。javascript
<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); }); };
设置表单数据:html
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不包含数据。java
为了解决这问题,应该在innerHTML以前把全部填写的数据都先赋值。jquery
绑定数据:ajax
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/52639653json