JS复选框勾选项求和判断

  • 文档创建者:gxy120313
  • 编辑次数:11次
  • 最近更新:Kevin-s 于 2019-11-26
  • 1. 概述

    1.1 问题描述

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

    1.2 实现思路

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

    2. 示例

    2.1 模板设计

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

    image.png

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

    image.png

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

    222

    最终排放效果图:

    image.png

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

    image.png

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

    image.png

    2.2 添加事件

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

    image.png

    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);
    }
    }

    2.3 预览效果

    保存模板,选择填报预览,效果如下图所示:

    222

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


    3. 模板下载

    模板效果在线查看请点击:JS 复选框勾选项求和判断.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\03-JS复选框勾选项求和判断.cpt

    点击下载模板:03-JS复选框勾选项求和判断.cpt


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览