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