行式填报批量删除

  • 文档创建者:文档助手1
  • 编辑次数:27次
  • 最近更新:Leo.Tsai 于 2020-06-03
  • 1. 概述

    1.1 应用场景

    多行网格式报表填报删除时,如果删除内容较多,一个个点击删除比较麻烦,如何实现下图所示的批量删除操作呢?

    Snag_3e5532f.png

    1.2 实现思路

    报表中添加复选按钮控件,在按钮中定义 JS 来获取选中行所在的数据,删除选中行并实现提交入库。

    批量删除涉及函数:contentPane.deleteRows(param);

    其中param为一串单元格坐标的字符串数组, 例如 [“A2”,”A3”,”A4”],即表示删除 A2、A3、A4 所在的记录。

    注:“A2”,”A3”,”A4”都是扩展之后最终展示的坐标。

    2. 示例

    2.1 准备数据

    新建数据集 ds1,SQL 查询语句为:SELECT * FROM Sales

    Snag_451fd2d.png

    2.2 表格设计

    A2 单元格添加按钮控件,按钮名字设置为「删除勾选」。

    A3 单元格添加复选按钮控件,左父格设置为 B3 。

    B3~G3 单元格添加文本控件。

    表格效果如下图所示:

    Snag_453edc2.png

    2)菜单栏选择模板>报表填报属性,新增内置 SQL 提交,如下图所示:

    Snag_459a85f.png

    2.2 方法一

    实现思路:通过 JS 将复选按钮与上面的按钮控件联系起来。点击按钮时,会生成一串勾选了的复选框所在的单元格坐标所组成的字符串数组。然后批量删除选中的记录。

    1)选中 A3 单元格,右边属性面板选择控件设置>事件,点击添加事件,给复选按钮添加一个初始化后事件,如下图所示:

    Snag_3de0521.png

    JavaScript 代码如下:

    if (!window.lineboxes) {
        window.lineboxes = [];
    }
    lineboxes[lineboxes.length] = this

    2)选中 A2 单元格,右边属性面板选择控件设置>事件,点击添加事件,给复选按钮添加一个点击事件,如下图所示:

    Snag_3e02fc1.png

    JavaScript 代码如下:

    if(window.lineboxes) {
        var cells = [];
        for (var i = 0; i < lineboxes.length; i++) {
    if (lineboxes[i].selected()) {
        cells[cells.length] = lineboxes[i].options.location;
            }
        }
        contentPane.deleteRows(cells); //批量删除选中的记录
        contentPane.writeReport(); //保存到数据库,实现的是工具栏中提交的操作

    2.3 方法二

    选中 A2 单元格,右边属性面板选择控件设置>事件,点击添加事件,给复选按钮添加一个点击事件,如下图所示:

    Snag_3e22690.png

    JavaScript 代码如下:

    var $span = $('.fr-checkbox-checkon');  //获取选中的复选框 
    var darray = []; //新建一个数组用来存放选中的单元格所在的行号
    var $tds = $("td").has($span);   //获取选中复选框所在的单元格,即选中的单元格
    for (var i = 0, len = $tds.length; i < len; i ++) {    //遍历选中的单元格    
       var id = $($tds[i]).attr("id");     //获取选中的单元格所在的行号    
       if (id) {      
           darray.push(id);     //将选中的单元格所在的行号放入到数组中    
       }
    }
    contentPane.deleteReportRC(null,darray); //第二个参数为行号
    contentPane.writeReport()

    2.4 效果预览

    保存报表,点击填报预览,批量删除效果如下图所示:

    222

    注:不支持移动端。

    3. 模板下载

    1)方法一

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\行式填报批量删除-方法一.cpt

    点击下载模板:行式填报批量删除-方法一.cpt

    2)方法二

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\行式填报批量删除-方法二.cpt

    点击下载模板:行式填报批量删除-方法二.cpt

    附件列表


    主题: 填报应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!