JS复选框勾选项求和判断

编辑
文档创建者:gxy120313 (61073 )     浏览次数:3343次     编辑次数:7次     最近更新:jiangsr 于 2018-05-25     

目录:

1. 描述编辑

场景描述:在实际项目填报中,在使用复选框进行勾选,有时候可能要加一个勾选数量和的限制,那么该如何实现呢?222

2. 思路编辑

我们需要在复选框中利用js计算数量的限制,用来控制复选框是否能够继续选择。

3. 操作步骤编辑

3.1 模板设计

新建一张模板,在模板中添加内置数据集,表名:Embedded1;增加四列,名称分别为:一级、二级、分值、ColName4,类型都是字符串的类型,如下图:

222

向表中插入8行,数据如下图:

222

在单元格A2、A3中输入一级、拖拽一级字段;在单元格B2、B3中输入二级、拖拽二级字段;在单元格C2、C3中输入分值、拖拽分值字段;在D2、D3单元格中输入是否,添加下拉复选框,模板样式如下:

222

最终排放效果图:

222

A3单元格中的数据设置是列表形式,如下图:

222

D3单元格设置控件名称为check1,如下图:

222

3.2 添加事件

给复选框按钮添加状态改变事件,定义参数b,值为公式:row();参数 isCheck,值为公式:$$$,如下图所示:

222

JS代码如下:

var classOnes = []; var classTwos = []; var points = []; var $span = $('.fr-checkbox-checkon'); //获取选中的复选框 var $tds = $("td").has($span); //定义选中复选框的所有单元格 var $trs = $("tr").has($tds); for(var i=0; i<$trs.length;i++){ var classOne = $("td:eq(0)",$($trs[i])).html(); //获取选中的A3单元格的值 classOnes.push(classOne); //将选中的值放到数组中 var classTwo = $("td:eq(1)",$($trs[i])).html(); //获取选中的B3单元格的值 classTwos.push(classTwo); var point = $("td:eq(2)",$($trs[i])).html(); //获取选中C3单元格的值 points.push(point); } //alert(classOnes + ";" + classTwos + ";" + points); //按一级分类求和 //if(parseInt(classOnes&&classTwos&&points) > 0){ } var index=0; var classAry=[]; var sumAry=[]; sumAry[0]=0; var aryIndex=0; for(var i=0;i<classOnes.length;i++){ if(classOnes[i]==classOnes[index]){ //alert(classOnes[i]); classAry[aryIndex]=classOnes[index]; sumAry[aryIndex]=parseInt(points[i])+parseInt(sumAry[aryIndex]); }else{ //alert(classOnes[i]); index=i; classAry[++aryIndex]=classOnes[i]; sumAry[aryIndex]=parseInt(points[i]); } } //alert(classAry+";"+sumAry); //校验是否有超100,有则当前值置为否 for(var i=0;i<sumAry.length;i++){ if(sumAry[i]>100){ FR.Msg.alert('提示','一级菜单:'+classAry[i]+',选中项之和超过100,请重新选择!'); this.setValue(false); } }

4. 预览效果编辑

4.1 PC端预览效果

保存后,点击填报预览,效果如描述中所示。

注:经过测试,手机端和h5不支持该效果。

5. 已完成模板编辑

模板效果在线查看请点击:JS复选框勾选项求和判断.cpt
已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\03-JS复选框勾选项求和判断.cpt

附件列表


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

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

此页面有帮助吗?