该文章由作者精心整理与总结,详细记录了对问题的思考与解决过程,原创文章,转载请在文章明显位置注明出处与原文链接!大家一起成长!!!
需要在layui同一个页面中显示两个子页面,其中一个页面中的表格添加行点击事件,点击某一行,查找该行对应的详细信息,在该页面的下方以表格形式显示详情
1、如何实现同一页面显示两个表格,且其中一个动态显示
2、如何实现动态表格与第一个表格的动态关联以及与controller的动态交互
解决方案:
通过添加layui中的行点击事件,在对应的js中动态添加iframe框架,并通过url=“”来引入预备的子页面来实现。
1、动态移除旧节点,添加新节点
2、获取前一个表格行的某个值,作为参数在引入页面时候传入对应的controller
//监听行单击事件(双击事件为:rowDouble)
table.on('row(currentTableFilter)', function(obj){ //其中currentTableFilter第一个表格的lay-filter的值
var data = obj.data;
var staffId=data.staffId;
//移除旧节点,添加新节点
$('.detail').remove();
var childPage='<div class="detail"><iframe align="center" width="100%" height="270" src=/attend/att?data='+id+
' frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes"></iframe></div>';
$('#page1').append(childPage);
//需要注意的是这样传值controller根本拿不到(折腾我好久的地方)
var childPage='<div class="detail"><iframe align="center" width="100%" height="270" src="/attend/att?data="'+id+
' frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes"></iframe></div>';
//还有这样后端也拿不到值
var childPage='<div class="detail"><iframe align="center" width="100%" height="270" src="/attend/att?data="+id'+
' frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes"></iframe></div>';
通过src中的地址请求对应的controller,由controller对应的方法将获得的值封装到model中,返回对应的备用页面,在备用页面中,通过layui的表格组件带着model中的值请求后台得到对应的记录
对应预备页面中的请求,其中Thymeleaf中利用隐藏域获得model中的值(当然也有其他方法,习惯这个方法而已)
<input id="thedata" th:type="hidden" th:value="${data}">
<script th:inline="none">
layui.use('table', function(){
var table = layui.table;
var dat=document.getElementById("thedata").value;
//展示已知数据
table.render({
elem: '#demo'
,url: '/attendance/getAttDetailData?staffId='+dat
- 以上就是此次遇到的问题的一点小小的总结,感觉上述做法还是有点绕,希望有更简便方法的大神不吝赐教!