作者：滴滴滴

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

前言：

这些总结来自公司上班中，遇到的一些基础的HTML， CSS，JAVASTRAP，和自定义的样式以及BOOTSTRAP的知识，具有代表性

会一个月进行总结一次前端，到后面估计主要集中在SQL优化和业务

jsp的触发按钮事件显示窗口，窗口内为图像

当然不是简单的触发事件，显示窗口。那么小白的场景辣！

详述：
我们有一个表格，表格所有列数据均是 jQuery.post 请求Action 方法，传递参数，回传来的data值，调用回调函数，对data进行循环遍历，填充表格。
现有两列列内容为图片，实际场景为，对某个对象的图片描述，比如为报修系统，那么在系统内存储了报修前现场环境照片，完成维修后的环境照片，如果报修前环境照片为两张，那么需要两个按钮事件，图片一、图片二分别打开展示图片信息，如果完成报修后环境图片为三张，那么就是三个能触发的按钮

如何解决：
取得每个报修订单的图片数量信息，触发按钮事件时，获取图片的绝对地址，展示到新的窗口中

• 拆分步骤
  
  • 判断的表达式，自动的根据回调函数中图片数量，生成对应数量的图片按钮
    
  • 点击按钮触发函数，完成绝对地址的拼接和传递
  • 触发图片窗口，考虑到整体样式风格，以及美观，我们使用 BootStrap 的模态框
  • 展示效果应考虑多种分辨率下或多种浏览器下兼容性

/*
遍历图片数量和展示，触发onclick事件，传递从Action中返回的结果集，这里返回的是图片的地址，并对地址进行处理，得到完整的物理地址，进行传递，在模态框中进行展示 
*/
				    
var picture = data[i].picture == null ?ull:data[i].picture.substring(0,data[i].picture.length-1).split(";");
          var pictures="";
	  if(picture != null){
	  for(var j=0; j<picture.length; j++){
	           pictures += "<A href=\"javascript:void(0)\" onclick=watchPicture('<%=basePath%>"+picture[j]+"') class=\"fanfa\" >图片"+(j+1)+"</A> "
		              }
		            }
		            
           var picture_2 = data[i].finish_picture==null?null:data[i].finish_picture.substring(0,data[i].finish_picture.length-1).split(";");
            var pictures_2 = "";
            if(picture_2 != null){
            for(var j=0; j < picture_2.length; j++){
            pictures_2 +="<A href=\"javascript:void(0)\" onclick=watchFinishPicture('<%=basePath%>"+picture_2[j]+"') class=\"fanfa\" >图片"+(j+1)+ "</A> "
		              }
		            }
				    
		addTr(newRow,(pictures),"150px",21,"");
 	        addTr(newRow,(pictures_2),"150px",22,"");

对列数据判断长度，截取字符，添加 watchPicture 事件，传递拼接的图片绝对地址

function watchFinishPicture(obj){
		var html_2 = obj;
		
		document.getElementById("picture").src = html_2;
		
		$('#myModal_1').modal('show');
	}

 watchPicture  函数，对参数 obj  写入 picture块，显示模态框

<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						×
					</button>
					<h4 class="modal-title" id="myModalLabel">
						查看图片
					</h4>
				</div>
				
				<div class="container" id="body">
				</div>
				
				<div class="modal-body">
                	<img id="picture" src="obj" alt="图片不显示替代的文字内容" style="width:100%;"></img>
            	</div>    	
			
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
				
			</div>
		</div>
	</div>

模态框的编码

模态框效果实例

完整的 JSP 代码会上传到 GITHUB

前言：

这些总结来自公司上班中，遇到的一些基础的HTML， CSS，JAVASTRAP，和自定义的样式以及BOOTSTRAP的知识，具有代表性

会一个月进行总结一次前端，到后面估计主要集中在SQL优化和业务

jsp的触发按钮事件显示窗口

当然不是简单的触发事件，显示窗口。那么小白的场景辣！

详述：
我们有一个表格，表格所有列数据均是 jQuery.post 请求Action 方法，传递参数，回传来的data值，调用回调函数，对data进行循环遍历，填充表格。问题出现在，当某一列数据，因为内容是文本，存储字符信息很多，已经超过了表格中分配给该行的宽度，设置样式，将剩余超过的长度用 ”…“ 表示，且有字体和背景颜色信息，实际上一列的每条数据都是公告信息，我们需要具体的进行查看完整的公告信息

如何解决：
我们将那一列中每一行，的公告缩略信息，使其成为一个点击事件，而不是单纯的文字，点击即可弹出窗口，展示完整公告信息，且保留之前的公告格式，如颜色，字体等

• 该列中行信息的传递，也就是公告信息，实际上是data数组中的值，当点击此信息时传递信息给function函数，再将信息传递给函数调用出的窗口
• 公告信息的格式问题，即加码 和 解码
• 公告详细信息窗口的样式选择，可以在JSP中设置不可见窗口，触发函数，设置可见，但考虑到整体样式风格，以及美观，我们使用 BootStrap 的模态框
• 展示效果应考虑多种分辨率下或多种浏览器下兼容性

jQuery.post("<%=basePath%>Announcement!getAnnouncementList.action",{page:newPage, num:pageNum,title:title,sdate:sdate,edate:edate},
	function(data){
		var trs=list.rows.length;
		for(var i=trs-1;i>0;i--){
	    	str.deleteRow(i);
	}
		  if(data!="" && data.length>0 ){
			for(var i=1;i<data.length;i++){
			    var newRow = list.insertRow(list.rows.length); 
				if(i%2!=0){
					newRow.className="list_light";
				}
				newRow.setAttribute("onmouseover","onColor(this)");
				newRow.setAttribute("onMouseOut","offColor(this)");
			    addTr(newRow,"<input type=\"checkbox\" name=\"bike\" value=\""+data[i].id+"\" class=\"duoxuan\" />","10%",0,"","");
			    addTr(newRow,(data[i].title==null?"":data[i].title),"150px",1,"");
			    addTr(newRow,(data[i].author==null?"":data[i].author),"150px",2,"");
			   
			    addTr(newRow,(data[i].body==null?"":data[i].body.toLowerCase().replace(/<\/?.+?>/g,"")),"150px",3,"");    
			    
			    addTr(newRow,(data[i].createdate==null?"":data[i].createdate.toString().substring(0,19)),"150px",4,"");
			    
			    //addTr(newRow,("a href=\"#\" onclick=\"watch('')\">点击查看</a>"),"150px",5,"test","xingqing");
			    
			    addTr(newRow,("<a href=\"#\" onclick=\"watch('"+encodeURI(data[i].body)+"') \">点击查看</a>"),"150px",5,"test");
			}
		  }

对列数据 encodeURI，并且添加 watch 事件

function watch(obj){
		document.getElementById("body").innerHTML = decodeURI(obj);
		$('#myModal').modal('show');
		
	}

watch 函数，对参数 obj 进行 decodeURI 写入 body 块，显示模态框

<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 90%;">
			<div class="modal-content">
                              <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">
						公告详情
					</h4>
				</div>
				
				<div class="modal-body" id="myModalLabel">
				</div>
				
				<div class="container" id="body">
				</div>
				
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
				
			</div>
		</div>
	</div>

模态框的编码

模态框效果实例

完整的 JSP 代码会上传到 GITHUB