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

编辑
文档创建者:印然 (67260 )     浏览次数:7509次     编辑次数:12次     最近更新:ukae 于 2018-08-10     

目录:

1. 描述编辑

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

2. 思路编辑

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

3. 操作步骤编辑

3.1 没设置冻结效果的模板
1)模板设计如下:
222
2)在扩展数据的左边增加一个复选框,此为A3单元格,并设置左父格为B3,即每条数据左边都有一个复选框。
3)设置B4单元格的控件类型为按钮,按钮类型为普通,按钮名称为对账,然后给按钮增加点击事件
222
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
3.2. 设置了冻结效果的模板
1)打开上述已经制作好的模板,点击模板>重复与冻结设置,在填报冻结模块设置冻结行列,如下图:
222
2)选择B2单元格中的按钮控件,修改其点击事件js,如下:
222
具体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)点击填报预览,即可看到如上图没设置冻结属性时的效果。

4. 预览效果编辑

4.1 PC端预览效果

222

4.2 移动端预览效果

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

5. 已完成模板编辑

1)未设置冻结
模板效果在线查看请点击:JS获取复选框选中行的单元格值示例一.cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\52-JS获取复选框选中行的单元格值示例一.cpt

2)设置了冻结

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

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗? [ 去社区提问 ]