JS复选框勾选项求和判断

编辑
  • 文档创建者:gxy120313
  • 浏览次数:5626次
  • 编辑次数:10次
  • 最近更新:Kevin-s 于 2019-06-22
  • 1. 描述

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

    2. 思路

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

    3. 操作步骤

    3.1 模板设计

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


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


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

    最终排放效果图:

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


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

    3.2 添加事件

    给复选框按钮添加状态改变事件,如下图所示:


    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%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\03-JS复选框勾选项求和判断.cpt

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

    此页面有帮助吗?只是浏览 [ 去社区提问 ]