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 
  • 以上就是此次遇到的问题的一点小小的总结,感觉上述做法还是有点绕,希望有更简便方法的大神不吝赐教!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值