左联查询导出问题和评论

最新推荐文章于 2023-06-08 17:47:45 发布

竖笛小风

最新推荐文章于 2023-06-08 17:47:45 发布

阅读量193

点赞数

文章标签： mysql java

本文链接：https://blog.csdn.net/weixin_45681935/article/details/114966352

版权

先看数据库设计，首先是问题表 en_con_edu_problem

然后是评论表 en_con_edu_comment

我们想将问题和评论导出在同一张Excel表里面。

在问题实体类里面添加一些属性

/**
     * 评论内容
     */
    @TableField(exist = false)
    private String commentContent;

    /**
     * 评论者手机号
     */
    @TableField(exist = false)
    private String commentPhone;

    /**
     * 评论时间
     */
    @TableField(exist = false)
    private Date commentCreateTime;

    /**
     * 评论是否精选
     */
    @TableField(exist = false)
    private Integer commentStatus;

首先用左联表，根据问题将所有的评论都查出

<select id="getGoodProblems" resultType="com.mdmooc.model.EnConEduProblem">
        SELECT
            p.phone,
            p.id,
            p.problem,
            p.create_time,
            c.pid,
            c.content commentContent,
            c.phone commentPhone,
            c.create_time commentCreateTime,
            c.`status` commentStatus
        FROM
            en_con_edu_problem p
        LEFT JOIN en_con_edu_comment c ON p.id = c.pid
        WHERE
            p.`status` = 1
        AND p.`problem` != '-'
         ORDER BY
            p.id DESC
    </select>

运行结果如图：

然后在前端写好导出接口，这里我们用的是layui自带导出：

<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>精选提问</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="/zcmdmooc/commons/common/jquery/jquery-3.3.1.min.js"></script>
    <script src="/zcmdmooc/commons/common/js/date.js"></script>
    <link rel="stylesheet" href="/zcmdmooc/commons/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/zcmdmooc/commons/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone" id="phone" placeholder="手机号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">问题</label>
                            <div class="layui-input-block">
                                <input type="text" name="problem" id="problem" placeholder="填写其它问题" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <button class="layui-btn" lay-submit lay-filter="formSave">查询</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <button type="button" class="layui-btn" style="margin-left: 30%" id="exportBtn">导出数据</button>
                    </div>

                </form>
                <div class="layui-card-body">
                    <table class="layui-table" lay-even="" lay-skin="nob" id="test-table-simple" lay-filter="ffrstable"></table>
                    <script type="text/html" id="barrstable">
                        <div class="settableBtn">
                            <a href="javascript:;"  lay-event="edit" style="color: #00b7ee">
                                查看评论
                            </a>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/zcmdmooc/commons/layuiadmin/layui/layui.js"></script>
<script>
    var BASE_PATH = "[[${mainDomain}]]";
    layui.config({
        base: '/zcmdmooc/commons/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function(){
        var table = layui.table;

        table.on('tool(ffrstable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 2,
                    title: "评论信息",
                    area: ['70%', '70%'],
                    content: "[[${mainDomain}]]/enConEduAdmin/toCommentDetail?id="+data.id,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();比如iframeWin.alert11();
                        console.log(body.html()) //得到iframe页的body内容
                        body.find('.btn').hide();//隐藏class为btn的元素
                    }
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

        //查询手机号和其他问题
        var form = '';
        layui.use(['form'], function () {
            form = layui.form;
            //监听提交
            form.on('submit(formSave)', function () {
                var data = {
                    phone: $("#phone").val(),
                    problem: $("#problem").val()
                }
                layui.table.reload("test-table-simple", {where: data,page:{curr:1}});
                return false;
            });
        });

        //第一个实例
        table.render({
            elem: '#test-table-simple',
            id:'exportTable',
            title:'导出数据',
            height: 'auto',
            even: true, //开启隔行背景
            skin: 'nob',
            cellMinWidth: 80,
            url: BASE_PATH + '/enConEduAdmin/goodList', //数据接口
            page: true, //开启分页
            response: {
                statusName: 'result' //规定数据状态的字段名称，默认：code
                ,statusCode: 0 //规定成功的状态码，默认：0
                ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                ,countName: 'count' //规定数据总数的字段名称，默认：count
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            },
            done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);
                //$("#total").html("在职"+count+"人");
                //得到当前页码
                //console.log(curr);

                //得到数据总量
                //console.log(count);
            }
            ,request: {
                pageName: 'pageNumber' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            cols: [
                [ //表头
                    {field: 'problem', title: '精选提问'},
                    {field: 'phone', title: '提问者手机号'},
                    {field: 'createTime', title: '提问时间',width:160,templet:function (param) {
                            return new Date(param.createTime).Format('yyyy-MM-dd HH:mm:ss');
                        }},
                    {field: 'commentContent', title: '评论内容'},
                    {field: 'commentPhone', title: '评论者手机号'},
                    {field: 'commentCreateTime', title: '点评时间',width:160,templet:function (param) {
                            return new Date(param.commentCreateTime).Format('yyyy-MM-dd HH:mm:ss');
                        }},
                    {field : 'commentStatus',title : '是否精选', align:'center', halign: 'center',
                        templet:function(value){
                            if(value.commentStatus == 1){
                                return "已精选";
                            } else if(value.commentStatus == 0){
                                return "未精选";
                            }else{
                                return "-";
                            }
                        }},
                    {
                        fixed: 'right',
                        title: '操作',
                        align: 'center',
                        width: 170,
                        toolbar: "#barrstable"
                    }
                ]
            ]
        });
        //导出
        $('#exportBtn').on('click',function () {
            //使用ajax请求获取所有数据
            $.ajax({
                url:  BASE_PATH + '/enConEduAdmin/exportGood',
                type: 'post',
                data: {
                    type: 1
                },
                async: false,
                dataType: 'json',
                success: function (res) {
                    //使用table.exportFile()导出数据
                    table.exportFile('exportTable', res.data, 'xls');
                }
            });
        });
    });
</script>
</body>
</html>

导出所对应的数据在controller调用

/**
     * 导出精选问题和评论
     */
    @RequestMapping(value = "exportGood")
    @ResponseBody
    public String exportGood(){
        List<EnConEduProblem> comments = enConEduProblemService.getGoodProblems();
        return JsonStrData(0, "查询成功",comments);
    }

最后导出结果：

竖笛小风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左联查询导出问题和评论

先看数据库设计，首先是问题表 en_con_edu_problem然后是评论表 en_con_edu_comment我们想将问题和评论导出在同一张Excel表里面。在问题实体类里面添加一些属性/** * 评论内容 */ @TableField(exist = false) private String commentContent; /** * 评论者手机号 */ @TableField(exist = ..
复制链接

扫一扫