MINIUI打印表單功能

需求背景

一個存單列表頁，要求雙擊行數據彈出單條存單詳情，詳情頁可單獨打印成表格用於交接簽字。

貼出源碼

存單列表頁：

<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