文档章节

MINIUI打印表单功能

Ethel_oo
 Ethel_oo
发布于 2017/11/03 16:18
字数 611
阅读 25
收藏 0

需求背景

一个存单列表页,要求双击行数据弹出单条存单详情,详情页可单独打印成表格用于交接签字。

贴出源码

存单列表页:

<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

© 著作权归作者所有

共有 人打赏支持
Ethel_oo
粉丝 4
博文 19
码字总数 9928
作品 0
蚌埠
程序员
私信 提问
jQuery MiniUI v2.0 发布

jQuery MiniUI 是强大的企业级WEB控件库。 具有:datagrid、tree、comboBox、datepicker、menu、toolbar等一系列控件。 技术亮点: 强大表格控件:实现锁定列、多表头、分页排序、行过滤、数...

fcrong
2012/03/13
21.7K
53
Fixwin电子窗体——表单报表控件与表单报表模板

Fixwin 新增了表单控件与报表控件,用于开发带表单录入和报表展示功能的业务窗体。 通过Fixwin电子窗体,设计几种常用的功能模块模版,在开发实际的项目时,采用模板创建相应模块能够节省工作...

彭博
2012/03/09
413
0
JEPLUS平台表单打印配置——JEPLUS软件快速开发平台

JEPLUS平台表单打印配置 我们在使用JEPLUS平台开发系统的过程中有时候会需要对一些表单进行打印功能的开发,今天这篇笔记就说一下JEPLUS平台表单打印的效果和配置过程。 一、效果展示 二、配...

JEPLUS
06/29
0
0
基于Activiti的流程协同开发平台(支持租用云架构)

基于Activiti的JSAAS高效企业应用及流程开发平台 JSAAS平台是新一款基于Spring Activiti的J2EE的快速开发框架,它本着灵活、快捷开发、高性能、高协作性、高稳定性、高可用性、人性化的操作体...

keitch
2016/06/08
8
0
JEPLUS仿真表单的配置与展示——JEPLUS软件快速开发平台

JEPLUS仿真表单的配置与展示 一、效果展示 二、功能配置的过程 仿真表单是我们自己画出来的表格样式仿真,因为不同客户用到的各种表格样式也不一定相同,所以想要做出来仿真表单还是需要我们...

JEPLUS
07/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
今天
2
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
今天
8
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
4
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
18
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部