Springboot整合layui之一个页面显示两张表格

该文章由作者精心整理与总结，详细记录了对问题的思考与解决过程，原创文章，转载请在文章明显位置注明出处与原文链接！大家一起成长！！！

需要在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 

• 以上就是此次遇到的问题的一点小小的总结，感觉上述做法还是有点绕，希望有更简便方法的大神不吝赐教！