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

最新推荐文章于 2022-09-10 02:03:50 发布

原创最新推荐文章于 2022-09-10 02:03:50 发布 · 645 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #java #jquery #jsp #js

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

实现思路

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>