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