JSP中实用知识总结(三)



 

jsp内根据条件,使得某些行不可勾选,也不可全选,反选

当然不是简单的勾选和全选、反选。那么小白的场景辣!

详述:
我们有一个表格,表格所有列数据均是 jQuery.post 请求Action 方法,传递参数,回传来的data值,调用回调函数,对data进行循环遍历,填充表格。
表格中每一条行数据,均是一条申请信息,我们的业务是可以选中多条申请,进入批量审批流程,因为某些原因,我们需要加条件,比如当该申请的审批人,为第一顺序审批人时,则不能使用批量审批,即 checkbook 无法勾选,同样的,表头的全选和全不选,均不能对该条数据生效,当此条审批检测为非第二顺序审批人时,任何勾选功能均能正常使用

如何解决:
需要设置条件判断哪些数据不可选,重写选中事件,以及全选、取消全选事件

  • 拆分步骤
    • 根据回调函数 判断 data 某个值,判断是否进行过申请,即当前是否为第一审批人
    • 第一审批人情况下,设置 勾选默认为 否
    • 重写selectAll 方法
    • 自定义两个 class 简称 duoxuan,buduoxuan,为实际情况提供支撑
    • 展示效果应考虑多种分辨率下或多种浏览器下兼容性
if(status=='wait'){						 
        $("#shenpi").show();
	$("#duoxuan").show();
        // 判断data[i]中isPay的值,为“是”和“否”,则已经走完了第一次审批,可以进行批量审批
	// isPay 的值为“Null”  无法勾选, 无法进行批量审批
	if(data[i].isPay == "是" || data[i].isPay == "否"){
		html+='<td><input type="checkbox" name="bike" value="'+data[i].userid+'-'+data[i].afs_id+'-'+data[i].wfn_id+'" class="buduoxuan" /></td>';
	}else{
        	html+='<td><input type="checkbox" name="bike"   value="'+data[i].userid+'-'+data[i].afs_id+'-'+data[i].wfn_id+'" class="duoxuan" DISABLED/></td>';
	};
这是在回调函数内,对 data 集合中 数据进行循环,先判断 status 值,进入一级界面,展示审批为等待的,再判断 isPay 值,进入二级界面,从而展示给用户,是否能对某条行数据进行勾选
<td style="width:20px;"><input type="checkbox" onclick="selectAll_1()" class="duoxuan" id="duoxuan" /></td>

/*==========省略很多无关代码=========*/

function selectAll_1(){
		var dx = document.getElementById("duoxuan");
		var items = document.getElementsByClassName("buduoxuan");
		if(dx.checked == false){
			for(var i=0;i<items.length;i++){
				items[i].checked=false;
			}
		}else{
			for(var i=0;i<items.length;i++){
				items[i].checked=true;
			}
		}
	}
 selectAll_1()事件,支撑全选和全不选状态
单选和全选效果
完整的 JSP 代码会上传到 GITHUB