0.表格样式
1.显示详情
第一种方法:利用表格的基本数据与从数据库中获取结合。
主要代码:
<c:if test="${danger.dangerstatus eq ‘已整改‘}"> ???????????????????????????????????????????????????????????<!-- 变活， 1 ：隐患id ，1 ：跟踪id --> ???????????????????????????????????????????????????????????<a href="javascript:void(0)" ???????????????????????????????????????????????????????????????onClick="el_setFour(this,${danger.dangerid},${danger.followid })">复查</a> ???????????????????????????????????????????????????????</c:if>全部表格代码
?????????????????????<c:forEach var="danger" ???????????????????????????????????????????????items="${result.pageBean.productList }" varStatus="status"> ???????????????????????????????????????????????<tr> ???????????????????????????????????????????????????<td>${ status.index + (result.pageBean.currentPage-1)*10+1}</td> ???????????????????????????????????????????????????<td><fmt:formatDate value="${danger.findtime }" ???????????????????????????????????????????????????????????pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td> ???????????????????????????????????????????????????<td>${danger.checkunit }</td> ???????????????????????????????????????????????????<td>${danger.type }</td> ???????????????????????????????????????????????????<td>${danger.dangergrade }</td> ???????????????????????????????????????????????????<td>${danger.unit }</td> ???????????????????????????????????????????????????<td>${danger.content}</td> ???????????????????????????????????????????????????<td>${danger.unit}</td> ???????????????????????????????????????????????????<td>${danger.manager}</td> ???????????????????????????????????????????????????<td>问题</td> ???????????????????????????????????????????????????<td>${danger.rectificationmeasure }</td> ???????????????????????????????????????????????????<td><fmt:formatDate ???????????????????????????????????????????????????????????value="${danger.rectificationtime }" ???????????????????????????????????????????????????????????pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td> ???????????????????????????????????????????????????<td><fmt:formatDate value="${danger.sidingtime }" ???????????????????????????????????????????????????????????pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td> ???????????????????????????????????????????????????<td><c:if test="${danger.dangerstatus eq ‘已整改‘}"> ???????????????????????????????????????????????????????????<!-- 变活， 1 ：隐患id ，1 ：跟踪id --> ???????????????????????????????????????????????????????????<a href="javascript:void(0)" ???????????????????????????????????????????????????????????????onClick="el_setFour(this,${danger.dangerid},${danger.followid })">复查</a> ???????????????????????????????????????????????????????</c:if> <c:if test="${danger.dangerstatus ne ‘已整改‘}"> ???????????????????????????????????????????????????????????<!-- <--需要改一下。2 ??换成id --> ???????????????????????????????????????????????????????????<a href="javascript:void(0)" data-toggle="modal" ???????????????????????????????????????????????????????????????data-target="#el_FourInfo" ???????????????????????????????????????????????????????????????onClick="allInfo(this,${danger.dangerid})">详情</a> ???????????????????????????????????????????????????????</c:if></td> ???????????????????????????????????????????????</tr> ???????????????????????????????????????????</c:forEach>点击详情的时候把自己传到JS函数中，JS函数根据传过来的处理(基本信息从表格中获取，剩下需要的其他信息用ajax从数据库中获取并填充到模态框的表格中)
???????????????????????????????????<script> ???????????????????????????????????????function allInfo(obj,recheckid) { ???????????????????????????????????????????$(‘#allInfo‘).modal(); ???????????????????????????????????????????$tds = $(obj).parents(‘tr‘).children(‘td‘); ???????????????????????????????????????????$("#xxcheckdate").text($tds.eq(1).html()); ???????????????????????????????????????????$("#xxcheckunit").text($tds.eq(2).html()); ???????????????????????????????????????????$("#xxdangertype").text($tds.eq(3).html()); ???????????????????????????????????????????$("#xxdutyunit").text($tds.eq(7).html()); ???????????????????????????????????????????????????????????????????????????????????????$("#xxzhenggaicuoshi").text($tds.eq(10).html()); ???????????????????????????????????????????$("#xxcheckman").text($tds.eq(7).html());//需要隐藏 ???????????????????????????????????????????$("#xxplace").text($tds.eq(4).html());//需要隐藏 ???????????????????????????????????????????$("#xxdangerlevel").text($tds.eq(4).html()); ???????????????????????????????????????????$("#xxdangercontent").text($tds.eq(6).html()); ???????????????????????????????????????????$("#xxzhenggaitime").text($tds.eq(11).html()); ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????$.ajax({ ???????????????????????????????????????????????????????????url : ‘${pageContext.request.contextPath}/recheck_getRecheck.action‘, ???????????????????????????????????????????????????data : {"recheckid" : recheckid}, ???????????????????????????????????????????????????type : ‘POST‘, ???????????????????????????????????????????????????dataType : ‘json‘, ???????????????????????????????????????????????????success : function(data) { ???????????????????????????????????????????????????????$("#xxrecheckman").text(data.result.recheckman); ???????????????????????????????????????????????????????$("#xxrecheckcomment").text(data.result.comment); ???????????????????????????????????????????????????????if($tds.eq(13).html()=="未复查"){ ???????????????????????????????????????????????????????????$("#xxrecheckresult").text($tds.eq(13).html()); ???????????????????????????????????????????????????????}else if(data.result.recheckresult=="1"){ ???????????????????????????????????????????????????????????$("#xxrecheckresult").text(‘合格‘); ???????????????????????????????????????????????????????}else if(data.result.recheckresult=="0"){ ???????????????????????????????????????????????????????????$("#xxrecheckresult").text(‘不合格‘); ???????????????????????????????????????????????????????} ???????????????????????????????????????????????????} ???????????????????????????????????????????}) ???????????????????????????????????????} ???????????????????????????????????</script>代码分析:
$tds = $(obj).parents(‘tr‘).children(‘td‘);是获取元素的上级的td元素。 $("#xxcheckdate").text($tds.eq(1).html());是获取表格指定第二列的数据并赋给模态框中的id为xxcheckdate的输入框。
然后通过下面的ajax获取信息后添加到模态框。
第二种方法:调用函数的时候传一个id，然后根据id去数据库查询后添加到模态框中。
2.添加数据
ajax调用用$("#reviewform").serialize()获取表单数据后提交给后台并根据后台传回的结果判断添加成功与否。
???????<script type="text/javascript"> ???????????????????????????????????????????????????????????function addRecheck(){ ???????????????????????????????????????????????????????????????alert($("#reviewform").serialize()); ???????????????????????????????????????????????????????????????$.ajax({ ???????????????????????????????????????????????????????????????????url : ‘${pageContext.request.contextPath}/recheck_addRecheck.action‘, ???????????????????????????????????????????????????????????????????data : $("#reviewform").serialize(), ???????????????????????????????????????????????????????????????????type : ‘POST‘, ???????????????????????????????????????????????????????????????????dataType : ‘json‘, ???????????????????????????????????????????????????????????????????success : function(data) { ???????????????????????????????????????????????????????????????????????if(data.result==0){ ???????????????????????????????????????????????????????????????????????????alert("添加失败，请重新添加"); ???????????????????????????????????????????????????????????????????????????return; ???????????????????????????????????????????????????????????????????????} ???????????????????????????????????????????????????????????????????????alert("添加成功！") ???????????????????????????????????????????????????????????????????????window.location.href="${baseurl }/queryView_findDangerSF.action"; ???????????????????????????????????????????????????????????????????????} ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????}) ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????} ???????????????????????????????????????????????????????</script>data : $("#reviewform").serialize() ??表示序列化之后的数据，将表单的name与值取到（注意的是表单不能定义submit按钮）
(类似于与get提交方式的?后面的数据)
??????????????????????????????????????????
ajax显示表格详情与添加数据(jQuery ajax - serialize() 方法)
原文地址：http://www.cnblogs.com/qlqwjy/p/7488804.html