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

JSP中实用知识总结(二)

前言:

这些总结来自公司上班中,遇到的一些基础的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

JSP中实用知识总结(一)

前言:

这些总结来自公司上班中,遇到的一些基础的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