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