JS获取复选框选中行的单元格值

  • 文档创建者:印然
  • 编辑次数:16次
  • 最近更新:Kevin-s 于 2019-12-19
  • 1. 概述

    1.1 问题描述

    对于填报模板,如何获取某些单元格的数据,如下图所示,希望获取复选框选中的那几行中的值,然后做一些处理。
    222


    1.2 实现思路

    点击“对账”按钮时,使用js我们先获取到选中的复选框(被选中的复选框有一个 class 类 x-checkbox-checkon) 所在单元格 td,从而获取复选框所在行 tr,然后取得行中地区,销售额以及收入所在单元格的值,并将这些值保存进预定义好的数组中,这样我们就可以引用最终的数组来引用所需的数据了。

    根据模板是否设置冻结,其获取复选框选中行单元格的方式有所不同,下面我们分开介绍。


    2. 示例

    2.1 没设置冻结效果的模板

    1)模板设计如下:

    222

    2)在扩展数据的左边增加一个复选框,此为 A3 单元格,并设置左父格为 B3,即每条数据左边都有一个复选框。

    3)设置 B4 单元格的控件类型为按钮,按钮类型为普通,按钮名称为对账,然后给按钮增加点击事件

    image.png

    JS 代码如下:


    var products = [];  
    var ordernums = [];  
    var ordernums1 = [];  
    var $span = $('.fr-checkbox-checkon');  //获取选中的复选框
    var $tds = $("td").has($span);     //定义选中复选框的单元格 
    var $trs = $("tr").has($tds);  
    for(var i=0; i<$trs.length;i++){  
    var product = $("td:eq(2)",$($trs[i])).html();   //获取选中的C3单元格的值
    products.push(product);     //将选中的值放到数组中
    var ordernum = $("td:eq(3)",$($trs[i])).html();   //获取选中的D3单元格的值
    ordernums.push(ordernum);  
    var ordernum1 = $("td:eq(6)",$($trs[i])).html();   //获取选中G3单元格的值
    ordernums1.push(ordernum1);    
    }  
    alert(products + "\n" + ordernums + "\n" + ordernums1);

    4)保存模板,并点击填报预览,选中若干行,点击对账按钮,即可看到选中的对应单元格的值弹出显示了,如下图:

    222

    2.2. 设置了冻结效果的模板

    1)打开上述已经制作好的模板,点击模板>重复与冻结设置,在填报冻结模块设置冻结行列,如下图:

    222

    2)选择 B4 单元格中的按钮控件,修改其点击事件 JS,如下:

    image.png具体 JS 代码如下:


    var products = [];  
    var ordernums = [];  
    var ordernums1 = [];  
    var $span = $('.fr-checkbox-checkon');  
    var $tds = $("td").has($span);     
    var $trs = $("tr").has($tds);  
    for(var i=1; i<$trs.length;i++){  
    var row = $("td:eq(0)",$($trs[i])).attr("row");   
    products.push(contentPane.getCellValue(2,row));  
    ordernums.push(contentPane.getCellValue(3,row));  
    ordernums1.push(contentPane.getCellValue(6,row));    
    }   
    alert(products + "\n" + ordernums + "\n" + ordernums1);

    3)点击填报预览,即可看到如上图没设置冻结属性时的效果。


    2.3 预览效果

    保存模板,选择填报预览,PC 端实现效果下图所示:

    222


    注:经测试,移动端不支持该 JS


    3. 模板下载

    1)未设置冻结

    模板效果在线查看请点击:JS 获取复选框选中行的单元格值示例一.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\52-JS获取复选框选中行的单元格值示例一.cpt

    点击下载模板:52-JS获取复选框选中行的单元格值示例一.cpt

    2)设置了冻结

    模板效果在线查看请点击:JS 获取复选框选中行的单元格值示例二.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\52-JS获取复选框选中行的单元格值示例二.cpt

    点击下载模板:52-JS获取复选框选中行的单元格值示例二.cpt


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!