基本功能完成

2023-06-10 01:13:29 +08:00
parent cb090dc1a2
commit 54d94a08fe
6 changed files with 170 additions and 8 deletions
--- a/web/System/messageManage.jsp
+++ b/web/System/messageManage.jsp
@@ -17,6 +17,23 @@
    <script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
 </head>
 <body>
+<script type="text/html" id="toolbarDemo">
+    <div class="layui-btn-container">
+<%--        <button class="layui-btn layui-btn-sm" lay-event="addAdmin">添加管理员</button>--%>
+    </div>
+</script>
+
+<script type="text/html" id="barDemo">
+    <div class="layui-clear-space">
+<%--        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>--%>
+        <a class="layui-btn layui-btn-xs" lay-event="more">
+            更多
+            <i class="layui-icon layui-icon-down"></i>
+        </a>
+    </div>
+</script>
+
+
 <table class="layui-hide" id="ID-table-demo-data"></table>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
@@ -39,6 +56,7 @@
                // 已知数据渲染
                var inst = table.render({
                    elem: '#ID-table-demo-data'
+                    ,toolbar: '#toolbarDemo'
                    ,cols: [[ //标题栏
                        {field: 'userId', title: 'ID', width: 80, sort: true}
                        ,{field: 'nickName', title: '昵称', width: 130}
@@ -48,9 +66,53 @@
                        {field:'dateTime', title: '评论时间', width:130, },
                        {field:'replyContent', title: '回复内容', width:200, },
                        {field:'replyDateTime', title: '回复时间', width:130, },
+                        {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
                        // {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}

-                    ]]
+                    ]],done:function (){
+                        // 触发单元格工具事件
+                        table.on('tool(ID-table-demo-data)', function(obj){ // 双击 toolDouble
+                            var data = obj.data; // 获得当前行数据
+                            // console.log(obj)
+                           if(obj.event === 'more'){
+                                // 更多 - 下拉菜单
+                                dropdown.render({
+                                    elem: this, // 触发事件的 DOM 对象
+                                    show: true, // 外部事件触发即显示
+                                    data: [{
+                                        title: '查看',
+                                        id: 'detail'
+                                    },{
+                                        title: '删除',
+                                        id: 'del'
+                                    }],
+                                    click: function(menudata){
+                                        if(menudata.id === 'detail'){
+                                            layer.msg('ID:'+ data.userId
+                                                +'\n昵称:'+data.nickName
+                                                +"\nQ Q:"+data.qQ
+                                                +"\nEmail:"+data.email
+                                                +"\n评论内容:"+data.content
+                                                +"\n评论时间:"+data.dateTime
+                                                +"\n回复内容:"+data.replyContent
+                                                +"\n回复时间:"+data.replyDateTime
+                                            );
+                                        } else if(menudata.id === 'del'){
+                                            layer.confirm('真的删除行 [id: '+ data.userId +'] 么', function(){
+                                                obj.del(); // 删除对应行（tr）的DOM结构
+                                                // layer.close(index);
+                                                // deleteAdmin(data.adminId);
+                                                deleteUser(data.userId);
+                                                // 向服务端发送删除指令
+                                            });
+                                        }
+                                    },
+                                    align: 'right', // 右对齐弹出
+                                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
+                                })
+                            }
+                        });
+                    }
                    ,data: result.data
                    //,skin: 'line' // 表格风格
                    //,even: true
@@ -66,6 +128,22 @@
          })
        }
    getDate();
+    function deleteUser(id){
+        axios({
+            // 请求方式
+            method: 'get',
+            // 请求的地址
+            url: 'http://localhost:8080${pageContext.request.contextPath}/deleteUser',
+            // URL 中的查询参数
+            params: {
+                id:id,
+            }
+        }).then(function (result) {
+            layer.msg('删除成功!'), {
+                offset: '6px'
+            }
+        })
+    }

 </script>