0.表格样式
1.显示详情
第一种方法:利用表格的基本数据与从数据库中获取结合。
主要代码:
<a href="javascript:void(0)" data-toggle="modal"
data-target="#el_FourInfo"
onClick="allInfo(this,${danger.dangerid})">详情</a>
全部表格代码
<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获取信息后添加到模态框。
重点:(例子二)
可以将所有的基本数据添加到隐藏域，然后在点击详情的时候获取隐藏域的值，并赋给模态框中的值，然后开启模态框。如果一行隐藏多个字段，可以每个加个class，然后通过获取到td元素，再通过过滤获取其兄弟节点或者其孩子节点.
jsp添加隐藏域
<c:forEach var="danger" items="${result.pageBean.productList }" varStatus="status"> <td>${ status.index + (result.pageBean.currentPage-1)*10+1} <input type="hidden" id="danger_IdNum" value="${danger.dangerid }" /> <input type="hidden" id="siding_IdNum" value="${danger.sidingid }" /> <input type="hidden" class="address_hidden" value="${danger.address }" /> <input type="hidden" class="dutyPerson_hidden" value="${danger.dutyperson}" /> <input type="hidden" class="supervisor_hidden" value="${danger.supervisor }" /> <input type="hidden" class="rectificationmeasure_hidden" value="${danger.rectificationmeasure }" /> </td> <td>${danger.dangergrade }</td> <td>${danger.type }</td> <td>${danger.unit }</td> <td>${danger.content}</td> <td>问题</td> <td><fmt:formatDate value="${danger.findtime }" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td> <td>${danger.checkunit }</td> <td>${danger.findperson }</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>${danger.dangerstatus }</td> <td><a href="javascript:void(0)" onClick="trace(this)">隐患跟踪</a> <a href="javascript:void(0)" onClick="allInfo(this)">详情</a> <a href="javascript:void(0)" onClick="postpone(this)">延期</a> </td> </tr> </c:forEach> </tbody>
详情事件:获取隐藏于数据与表格数据填充到模态框，没有的用ajax请求后端
JS获取隐藏域的值赋给模态框
<script> //点击详情按钮进行的操作 function allInfo(obj) { //获取隐藏域值 var address_hidden = $(obj).parents("tr").find(".address_hidden").val(); var dutyPerson_hidden = $(obj).parents("tr").find(".dutyPerson_hidden").val(); var supervisor_hidden = $(obj).parents("tr").find(".supervisor_hidden").val(); var rectificationmeasure_hidden = $(obj).parents("tr").find(".rectificationmeasure_hidden").val(); //获取当前行中的所有列的信息 $tds = $(obj).parents('tr').children('td'); //alert($tds.eq(0).html() + $tds.eq(1).html()); //alert($("#findTime").text()); //$("#dangerGrade").text($tds.eq(1).html()); $("#dangerGrade_detail").text($tds.eq(1).html()); $("#dangerType_detail").text($tds.eq(2).html()); $("#dutyUnit_detail").text($tds.eq(3).html()); $("#dangerContent_detail").text($tds.eq(4).html()); $("#findTime_detail").text($tds.eq(6).html()); $("#checkUnit_detail").text($tds.eq(7).html()); $("#findPerson_detail").text($tds.eq(8).html()); $("#rectificationTime_detail").text($tds.eq(9).html()); //添加隐藏域信息 $("#address_detail").text(address_hidden); $("#dutyPerson_detail").text(dutyPerson_hidden); $("#rectificationmeasure_detail").text(supervisor_hidden); $("#supervisor_detail").text(rectificationmeasure_hidden); //从数据库中获取跟踪表的相关信息 //获取当前行的隐患信息的四定ID var sidingId = $(obj).parents("tr").find("#siding_IdNum").val(); //alert(sidingId); //异步提交获取数据 $.ajax({ url : '${pageContext.request.contextPath }/followHander_getDetailInfo.action', data : {"sidingId":sidingId}, type : 'POST', dataType : 'json', async:true, success : function(data) { //alert(data.followInfo); //是否有安全措施--判断输出 $("#hasSecurity_detail").text(data.followInfo.hassecurity>0?"是":"否"); //追踪详情信息 $("#safetyTechnician_detail").text(data.followInfo.safetytechnician); $("#managerNameFollow_detail").text(data.followInfo.managername); } }); //开启模态框 $('#allInfo').modal(); } </script>
总结:
使用方法可以总结为: 表格的td里面放一些a标签，onclick时间传自己下去。JS函数首先获取其父元素tr(获取到一行)，再获取其所有的td元素（获取到每列），然后对每列进行过两次取值。
<a href="javascript:void(0)" data-toggle="modal" data-target="#el_FourInfo" onClick="allInfo(this)">详情</a>
$tds = $(obj).parents('tr').children('td'); //获取到每列集合
$("#xxcheckdate").text($tds.eq(1).html()); //第一种过滤方式(在表格中位置)
var findperson_hidden = $(obj).parents('tr').find(".hidden_findperson").val(); //第二种过滤方式。找到每列再过滤每列下面的class为hidden_findperson
var findperson_hidden = $tds.find(".hidden_findperson").val(); //同上面第二种过滤方式一样。只是用到$tds