316 lines
14 KiB
Plaintext
316 lines
14 KiB
Plaintext
<%--
|
||
Created by IntelliJ IDEA.
|
||
User: LDQ
|
||
Date: 2023/6/9
|
||
Time: 16:57
|
||
To change this template use File | Settings | File Templates.
|
||
--%>
|
||
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
||
<html>
|
||
<head>
|
||
<title>Title</title>
|
||
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
||
<!-- 引入 layui.css -->
|
||
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
|
||
|
||
<!-- 引入 layui.js -->
|
||
<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="upadte">修 改</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>
|
||
function getDate(){
|
||
axios({
|
||
// 请求方式
|
||
method: 'get',
|
||
// 请求的地址
|
||
url: 'http://localhost:8080${pageContext.request.contextPath}/listManage',
|
||
// URL 中的查询参数
|
||
params: {
|
||
|
||
}
|
||
}).then(function (result) {
|
||
console.log(result);
|
||
layui.use('table', function(){
|
||
var table = layui.table;
|
||
var form = layui.form;
|
||
var dropdown = layui.dropdown;
|
||
var laydate = layui.laydate;
|
||
var util = layui.util;
|
||
// 已知数据渲染
|
||
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}
|
||
,{field: 'qQ', title: 'QQ', width: 130}
|
||
,{field: 'email', title: '邮箱', width: 180},
|
||
{field:'content', title: '评论内容', width:250, },
|
||
{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%);' // 设置额外样式
|
||
})
|
||
}
|
||
});
|
||
|
||
|
||
table.on('toolbar(ID-table-demo-data)', function(obj){
|
||
var id = obj.config.id;
|
||
var checkStatus = table.checkStatus(id);
|
||
var othis = lay(this);
|
||
switch(obj.event){
|
||
case 'upadte':
|
||
layer.open({
|
||
title: '修改',
|
||
type: 1,
|
||
area: ['80%','80%'],
|
||
content: `<div id="warp">
|
||
<div style="display: flex;flex-direction: column;align-content: center;align-items: center;justify-content: center">
|
||
<form class="layui-form" lay-filter="scoreRuleForm">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">ID</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="id" id="id" autocomplete="off" class="layui-input" placeholder="被修改数据ID">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">昵 称</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="nickName" name="nickName" class="layui-input" >
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">QQ</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="qq" name="qq" class="layui-input" >
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item" pane>
|
||
<label class="layui-form-label">Email</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="email" name="email" lay-filter="required" class="layui-input" >
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item layui-form-text">
|
||
<label class="layui-form-label">评论内容</label>
|
||
<div class="layui-input-block">
|
||
<textarea placeholder="请输入评论内容" id="content" name="content" class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">评论日期</label>
|
||
<div class="layui-input-inline layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-date"></i>
|
||
</div>
|
||
<input type="text" name="dateTime" id="dateTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item layui-form-text">
|
||
<label class="layui-form-label">回复内容</label>
|
||
<div class="layui-input-block">
|
||
<textarea placeholder="请输入回复内容" id="replyContent" name="replyContent" class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">回复日期</label>
|
||
<div class="layui-input-inline layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-date"></i>
|
||
</div>
|
||
<input type="text" name="replyDateTime" id="replyDateTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
|
||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>`,
|
||
|
||
});
|
||
break;
|
||
// case 'getData':
|
||
// var getData = table.getData(id);
|
||
// console.log(getData);
|
||
// layer.alert(layui.util.escape(JSON.stringify(getData)));
|
||
// break;
|
||
// case 'LAYTABLE_TIPS':
|
||
// layer.alert('自定义工具栏图标按钮');
|
||
// break;
|
||
};
|
||
});
|
||
// 日期
|
||
|
||
|
||
form.on('submit(demo1)', function(data){
|
||
var field = data.field; // 获取表单字段值
|
||
// 显示填写结果，仅作演示用
|
||
layer.alert(JSON.stringify(field), {
|
||
title: '当前填写的字段值'
|
||
});
|
||
$.ajax({
|
||
url:"http://localhost:8080${pageContext.request.contextPath}/update",
|
||
async:false,
|
||
type:"POST",
|
||
dataType:"text",
|
||
data:field,
|
||
success:function(){
|
||
window.location.reload();
|
||
}
|
||
})
|
||
layer.alert(JSON.stringify(data.field), {
|
||
})
|
||
return false; // 阻止默认 form 跳转
|
||
});
|
||
|
||
}
|
||
,data: result.data
|
||
//,skin: 'line' // 表格风格
|
||
//,even: true
|
||
,page: true // 是否显示分页
|
||
,limits: [5, 10, 15]
|
||
,limit: 5 // 每页默认显示的数量
|
||
});
|
||
|
||
|
||
|
||
|
||
});
|
||
})
|
||
}
|
||
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'
|
||
}
|
||
})
|
||
}
|
||
|
||
layui.use('laydate', function(){
|
||
var laydate = layui.laydate;
|
||
laydate.render({
|
||
elem: '#dateTime',
|
||
});
|
||
laydate.render({
|
||
elem: '#replyDateTime',
|
||
});
|
||
});
|
||
|
||
|
||
<%--function update(){--%>
|
||
<%-- var id=document.getElementById('id').value;--%>
|
||
<%-- var nickName=document.getElementById('nickName').value;--%>
|
||
<%-- var qq=document.getElementById('qq').value;--%>
|
||
<%-- var email=document.getElementById('email').value;--%>
|
||
<%-- var content=document.getElementById('content').value;--%>
|
||
<%-- var replyContent=document.getElementById('replyContent').value;--%>
|
||
<%-- var dateTime=document.getElementById('dateTime').value;--%>
|
||
<%-- var ReplyDateTime=document.getElementById('ReplyDateTime').value;--%>
|
||
<%-- axios({--%>
|
||
<%-- // 请求方式--%>
|
||
<%-- method: 'post',--%>
|
||
<%-- // 请求的地址--%>
|
||
<%-- url: 'http://localhost:8080${pageContext.request.contextPath}/update',--%>
|
||
<%-- // URL 中的查询参数--%>
|
||
<%-- params: {--%>
|
||
<%-- id:id,--%>
|
||
<%-- nickName:nickName,--%>
|
||
<%-- qq:qq,--%>
|
||
<%-- email:email,--%>
|
||
<%-- content:content,--%>
|
||
<%-- replyContent:replyContent,--%>
|
||
<%-- dateTime:dateTime,--%>
|
||
<%-- ReplyDateTime:ReplyDateTime--%>
|
||
<%-- }--%>
|
||
<%-- }).then(function (result) {--%>
|
||
<%-- layer.msg('修改成功!'), {--%>
|
||
<%-- offset: '6px'--%>
|
||
<%-- }--%>
|
||
<%-- window.location.reload();--%>
|
||
<%-- })--%>
|
||
<%--}--%>
|
||
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html>
|