根据table数据监听行事件请求后端返回给ajax的数据显示在layui弹出层iframe中

本文介绍了一个基于layui框架实现的表格行点击事件处理流程。通过监听表格行点击事件并发起Ajax请求获取数据,然后利用layer弹窗展示详细信息。具体包括JS事件绑定、Ajax通信、后端数据处理及前端页面展示等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实现思路

layui监听 table行事件调用ajax请求并将点击的行的数据发送给控制器,由控制器调用后端业务得到结果将结果放入session,由ajax 回调函数success open一个type为2(即iframe)的弹出层,content属性为控制器链接,弹出层请求的控制器返回一个jsp页面,在jsp页面中获取并显示之前存入session中的数据。

主页面.js

//监听行单击事件(双击事件为:rowDouble)
table.on('row(unreadMessage)', function(obj){
    var data = obj.data;
    $.ajax({
        type: 'POST',
        url: '/stu-info_manage/getTransactionDetail',//发送请求
        data: {
            messageId:data.messageId,
        },
        success: function(result) {
            layer.open({
                type: 2,//弹出框类型
                shift:1,//弹出框动画效果
                closeBtn: 0, //不显示关闭按钮
                anim: 5,
                shadeClose: true, //开启遮罩关闭
                title:'事务信息',
                area : ['60%' , '90%'],
                shift:1,
                content:'/stu-info_manage/transactionDetail'//将结果页面放入layer弹出层中

            });
        }
    });

Controller

   //事务详情弹出层
    @RequestMapping("/getTransactionDetail")
    @ResponseBody
    public String getTransactionDetail(HttpServletRequest request,
                                           @RequestParam("messageId") int messageId) {
        String content;
        try {
            //创建session对象
            HttpSession session = request.getSession();
            //把数据保存在session域对象中
            session.setAttribute("messageId", messageId);
            content=ykyService.queryMessageContent(messageId);
            session.setAttribute("messageContent", content);
            if(session==null||"".equals(messageId+"")){
                //没有登录成功,跳转到登录页面
                return "redirect:/";    //返回首页
            }
        }catch (Exception e){
            return "redirect:/";
        }
        return content;
    }
    //加载事务内容页面
    @RequestMapping("/transactionDetail")
    public String transactionDetail(HttpServletRequest request) {
        try {
            //创建session对象
            HttpSession session = request.getSession();
            //取出会话数据
            String id = (String) session.getAttribute("id");
            System.out.println("id==="+id);
            if(session==null||id==null){
                //没有登录成功,跳转到登录页面
                return "redirect:/";    //返回首页
            }
        }catch (Exception e){
            return "redirect:/";
        }
        return "TransactionDetail";
    }

弹出层iframe加载的jsp页面(部分)

<script>
    var messageContent='${sessionScope.messageContent}';
</script>
<body>
<div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-panel">
                <div style="padding: 50px 30px;" id="messageContent"></div>
            </div>
        </div>
    </div>
</div>
<script>
    $("#messageContent").text(messageContent);
</script>
</body>
以下是一个示例代码,其中假设你的表格 id 为 test,后端接口为 /api/book/:id,updateBook.html 是更新图书信息的页面。 HTML 代码: ```html <table id="test" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> </script> ``` JavaScript 代码: ```javascript // 渲染表格 layui.use(['table', 'form', 'layer'], function () { var table = layui.table; var form = layui.form; var layer = layui.layer; // 渲染表格 table.render({ elem: '#test', url: '/api/books', cols: [[ {type: 'checkbox'}, {field: 'id', title: 'ID'}, {field: 'title', title: '标题'}, {field: 'author', title: '作者'}, {field: 'price', title: '价格'}, {fixed: 'right', title: '操作', toolbar: '#barDemo'} ]], page: true }); // 监听表格工具条 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ // 打开更新图书信息的页面 layer.open({ type: 2, title: '更新图书信息', content: '/updateBook.html', area: ['500px', '400px'], btn: ['保存', '取消'], yes: function(index, layero){ // 更新图书信息 var iframeWin = window[layero.find('iframe')[0]['name']]; var form = iframeWin.document.getElementById('updateForm'); var formData = new FormData(form); $.ajax({ url: '/api/book/' + data.id, type: 'PUT', data: formData, processData: false, contentType: false, success: function(res){ if(res.code === 0){ layer.msg('更新成功'); layer.close(index); table.reload('test'); }else{ layer.msg('更新失败:' + res.msg); } }, error: function(){ layer.msg('网络错误'); } }); }, btn2: function(index, layero){ // 取消更新 layer.close(index); }, success: function(layero, index){ // 向 iframe 传递数据 var iframeWin = window[layero.find('iframe')[0]['name']]; iframeWin.document.getElementById('title').value = data.title; iframeWin.document.getElementById('author').value = data.author; iframeWin.document.getElementById('price').value = data.price; } }); } }); }); ``` updateBook.html 代码: ```html <form id="updateForm"> <div class="layui-form-item"> <label class="layui-form-label">标题</label> <div class="layui-input-block"> <input type="text" id="title" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">作者</label> <div class="layui-input-block"> <input type="text" id="author" name="author" required lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">价格</label> <div class="layui-input-block"> <input type="text" id="price" name="price" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input"> </div> </div> </form> <script> layui.use(['form'], function(){ var form = layui.form; // 表单验证 form.verify({ title: function(value){ if(value.length > 50){ return '标题不能超过50个字符'; } }, author: function(value){ if(value.length > 20){ return '作者不能超过20个字符'; } }, price: function(value){ if(isNaN(value)){ return '价格必须是数字'; } } }); }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值