• 单选,全选操作js相关技术


    jsp上编写全选框,单选框

    全选框

    1 <td class="TableHeaderCell" style=" 30px;">
    2     <input id="checkedAll"  type="checkbox">
    3 </td>

    单选框

    <input id="fappChecked" 
        name="checkedFapp" type="checkbox"
        onclick="javascript:cliAppro.checkedOne(this);"
        forgid="<c:out value='${row.FORGID}'/>" 
        forgname="<c:out value='${row.FORGNAME}'/>"
        cfrcode="<c:out value='${row.FRCODE}'/>"
         value = "<c:out value='${row.FAPPALLID}'/>"/>

    jsp上还要表写几个隐藏的input框,用于存放选中的数据

    1 <input id="FAPPALLIDS" type="hidden" value="" />
    2 <input id="UNITS" type="hidden" value=""/>
    3 <input id="FORGIDS" type="hidden" value=""/>
    4 <input id="CFRCODES" type="hidden" value=""/>

    js上首先在加载页面时给这几个隐藏框赋值

     1         /**
     2          * 初始化页面数据(0,打开页面初始化,1,查询、分页数据初始化);
     3          * 为多选框存放数值
     4          * @param {Object} ctype
     5          */
     6         this.iniData = function(ctype){
     7                 fappallids = $get('FAPPALLIDS');
     8                 forgids = $get('FORGIDS');
     9                 units = $get('UNITS');
    10                 cfrcodes = $get('CFRCODES');
    11                 checkedNumber = $get('checkedNumber');
    12                 checkedFapp = document.getElementsByName("checkedFapp");
    13             
    14             if(ctype =="0"){
    15                 fappallids.value = "";
    16                 forgids.value = "";
    17                 units.value = "";
    18                 cfrcodes.value = "";
    19                 checkedNumber.innerHTML = 0;
    20             }
    21         }

    js上一个公用的添加、删除选中数据的方法

     1         /**
     2          * 操作拨付数组;添加、删除拨付号
     3          * @param {Object} box_obj
     4          */
     5         this.add_del_Fund = function(box_obj){
     6             //获取id=FAPPALLIDS 的隐藏框的值
     7             var fund = fappallids;
     8             
     9             if(box_obj.checked){//选中 向隐藏值中添加
    10                 if(fund.value == ''){//判断id=FAPPALLIDS 的隐藏框的值是否为空,为空就直接赋值,不为空就 +=',' 加逗号 追加值
    11                     fund.value = box_obj.value;
    12                     //注意不同的取值方法 .value和getAttribute("");
    13                     units.value = box_obj.getAttribute('forgname');
    14                     forgids.value = box_obj.getAttribute('forgid');
    15                     cfrcodes.value = box_obj.getAttribute('cfrcode');
    16                  }else{
    17                     fund.value+= ','+box_obj.value;
    18                     units.value +=','+box_obj.getAttribute('forgname');
    19                     forgids.value +=','+box_obj.getAttribute('forgid');
    20                     cfrcodes.value +=','+box_obj.getAttribute('cfrcode');
    21                 }
    22             }else{//取消选择从隐藏值中删除
    23                 //将字符串按 ','分割为字符串数组
    24                 var funds = (fund.value).split(',');
    25                 var funits = (units.value).split(',');
    26                 var fforgids =(forgids.value).split(',');
    27                 var fcforgids =(cfrcodes.value).split(',');
    28                 //声明数组
    29                 var newFunds = [];
    30                 var newFunits = [];
    31                 var newFforgids = [];
    32                 var newFcforgids = [];
    33                 for(var n=0,j = 0; j < funds.length; j++){
    34                     //判断funds[j]是否和你要取消选中的框里的值相等,
    35                     //如果不相等就将这个值赋值到新声明的数组中
    36                     //如果相等 就用continue关键字跳过下面赋值的代码,这样就相当于删除了
    37                     if(funds[j].indexOf(box_obj.value) == 0){
    38                         continue;
    39                     }
    40                     newFunds[n] = funds[j];
    41                     newFunits[n] = funits[j];
    42                     newFforgids[n] = fforgids[j];
    43                     newFcforgids[n] = fcforgids[j];
    44                     //为下一次赋值做准备
    45                     n++;
    46                 }
    47                 //用新声明的数组赋值到fund中
    48                 fund.value = newFunds.join(',');
    49                 units.value = newFunits.join(',');
    50                 forgids.value = newFforgids.join(',');
    51                 cfrcodes.value = newFcforgids.join(',');
    52             }
    53         }

    js上单选方法:

     1 /**
     2          * 单选操作
     3          * @param {Object} box_obj
     4          */
     5         this.checkedOne = function(box_obj){
     6             //声明变量obj对应name="cliApplyBFWin"的对选框
     7             var obj = checkedFapp;
     8             var checkedNum = 0;
     9             //每次选中都要计算已选择的框的个数
    10             for ( var i = 0; i < obj.length; i++) {
    11                 if (obj[i].checked){
    12                     checkedNum +=1;
    13                 }
    14             }
    15             //获取id='checkedAll'的全选框对象
    16             var checkAll = $get('checkedAll');
    17             //由checkedNum与obj.length相等判断所有的多选框都已经被选中,
    18             //这时改变全选框的状态为已选
    19             if(checkedNum == obj.length){
    20                 checkAll.checked = true;
    21             }
    22             //由checkedNum小于obj.length判断还有多选框的状态为 未选中
    23             //这时 全选框 的状态为 未选中
    24             if(checkedNum < obj.length){
    25                 checkAll.checked = false;
    26             }
    27             //获取和删除选中获得的值
    28             object.add_del_Fund(box_obj);
    29             if((fappallids.value).length < 1){
    30                 checkedNumber.innerHTML = 0;
    31             }else{
    32                 checkedNumber.innerHTML = ((fappallids.value).split(',')).length;
    33             }
    34         }

    js上全选方法:

     1 /**
     2          * 全选择
     3          * 
     4          */
     5         this.checkedAll = function(checkObj){
     6             //获取全选框的状态
     7             var booleanAll = checkObj.checked;
     8             //获取单选框组对象
     9             var obj = checkedFapp;
    10             var i = 0;
    11             for (; i < obj.length; i++) {
    12                 //判断单选框状态是否和全选框相同,
    13                 //相同就跳过继续,不相同就改变单选框状态
    14                 if(obj[i].checked == booleanAll)
    15                     continue;
    16                 obj[i].checked = booleanAll;
    17                 //从隐藏框里添加或者取消单选框的值
    18                 object.add_del_Fund(obj[i]);
    19             }
    20     
    21             if((fappallids.value).length < 1){
    22                 checkedNumber.innerHTML = 0;
    23             }else{
    24                 checkedNumber.innerHTML = ((fappallids.value).split(',')).length;
    25             }
    26         }

    java代码中对选中数据进行批量操作

     1 //先判断是否存在
     2             if(ToolUtils.isEmpty(mapParam.get("FAPPALLIDS"))){
     3                 throw new ServiceLocatorException("请选择要撤销的申请单!");
     4             }
     5             //若存在就将值保存到新数值中
     6             String fappallids[] = String.valueOf(mapParam.get("FAPPALLIDS")).split(",");
     7             String forgids[] = String.valueOf(mapParam.get("FORGIDS")).split(",");
     8             String cfrcodes[] = String.valueOf(mapParam.get("CFRCODES")).split(",");
     9             if(fappallids.length != forgids.length){
    10                 throw new SaveException("非法操作!请刷新页面,重新操作!");
    11             }
    12             //从mapParam中删除那些数值
    13             mapParam.remove("FAPPALLIDS");
    14             mapParam.remove("FORGIDS");
    15             mapParam.remove("CFRCODES");
    16             int delN = 0;
    17             //再将值一个一个的存到map中,进行相关操作
    18             for(int i=0; i<fappallids.length; i++){
    19                 mapParam.put("FAPPALLID", fappallids[i]);
    20                 mapParam.put("FORGID", forgids[i]);
    21                 mapParam.put("FRCODE", cfrcodes[i]);
    22                 delN += this.delRevocationForFapp(mapParam);
    23             }
    24             return delN;
  • 相关阅读:
    EL表达式 (详解)
    宜信面试整理
    Java 合并两个排序数组
    动态规划初识(爬楼梯问题)
    二叉树的最小深度
    ElasticSearch 单字符串多字段查询评分问题
    ES 分词
    汽车之家 面试总结
    浪潮之巅读书笔记
    闲徕互娱 面试总结
  • 原文地址:https://www.cnblogs.com/liujie-e2/p/7219005.html
Copyright © 2020-2023  润新知