效果图：
html和css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
</head>
<style>
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
text-align: center;
line-height: 30px;
width: 1200px;
margin-top: 10px;
}
/* */
.dialog {
display: none;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
line-height: 40px;
}
.dialog .container {
margin: 0 auto;
font-size: 18px;
width: 60%;
height: 400px;
background-color: #fff;
text-align: center;
}
.dialog .container .dialog_header {
background-color: red;
}
</style>
<body>
<button type="" id="login">登录</button>
<button type="" id="load">加载</button>
<input type="text">
<select name="status">
<option value="正常">正常</option>
<option value="下架">下架</option>
</select>
<button type="" id="search">查询</button>
<button type="" id="updata">新增</button>
<table>
<thead>
<th>序号</th>
<th>产品编号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
<th>所属栏目</th>
<th>操作</th>
</thead>
<tbody>
</tbody>
</table>
<!-- 模态框 -->
<div class="dialog">
<div class="container">
<!-- 头部 -->
<div class="dialog_header">
新增产品信息
</div>
<!-- 中部 -->
<div class="dialog_center">
<div>产品名称：<input type="text" name="name"></div>
</div>
<div class="dialog_center">
<div>状态:正常 <input type="radio" name="status" value="正常">
下架<input type="radio" name="status" value="下架">
</div>
</div>
<div class="dialog_center">
<div>价格: </input><input type="text" name="price"></div>
</div>
<div class="dialog_center">
<div>产品描述:<textarea rows="" cols="" name="description"></textarea></div>
</div>
<div class="dialog_center">
</div>
<!-- 尾部 -->
<div class="dialog_footer">
<button class="cancel">取消</button>
<button class="submit">确定</button>
</div>
</div>
</div>
</body>
</html>script（注意url需要修改成自己的接口地址）
<script>
//申明一个user全局对象
var user = null
var baseURL = "" //此处填写自己的接口地址
//复用申明成全局变量
var obj = {
page: 1,
pageSize: 20,
}
//加载页面就获取本地token
var token = sessionStorage.getItem('token')
//点击登录获取token并保存到本地
$('#login').click(function () {
var obj = {
username: 'admin1',
password: 123321
}
$.ajax({
//请求方式
url: baseURL + '/user/login',
//请求方式
method: 'post',
//请求头
headers: {
"Content-Type": "application/json"
},
//携带参数
data: JSON.stringify(obj),
//成功回调
success(res) {
// console.log(res);
sessionStorage.setItem('token', res.data.token)
//全局配置请求全部携带token
$.ajaxSetup({
headers: {
"Authorization": sessionStorage.getItem('token')
}
})
},
//失败回调
error() {
}
})
})
//加载按钮 展示产品
$('#load').click(function () {
//发送之前先清空，然后再加载数据
$('tbody').empty()
$.ajax({
//请求方式
url: baseURL + '/product/pageQuery',
//请求方式
method: 'get',
//请求头
headers: {
"Content-Type": "application/json"
},
//携带参数
data: Qs.stringify(obj),
//成功回调
success(res) {
console.log(res.data.list);
//遍历数组 动态生成tr
res.data.list.forEach((item, index) => {
var newTr =
`<tr>
<td>${index + 1}</td>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.price}</td>
<td>${item.status}</td>
<td>${item.category.name}</td>
<td><button id="${item.id}" class="toDelete">删除</button><button class='toEdit' item = ${JSON.stringify(item)}>修改</button></td>
</tr>`
$('tbody').append(newTr)
});
},
//失败回调
error() {
}
})
})
//删除按钮事件
$('table tbody').on('click', '.toDelete', function () {
var id = $(this).attr('id')
console.log(id);
var result = confirm('确认删除？')
if (result) {
$.ajax({
url: baseURL + '/product/deleteById',
method: 'get',
data: {
id: id
},
success(res) {
// console.log(res);
//提示用户删除成功
//刷新页面
$('#load').trigger('click')
},
error() {
}
})
} else {
$('confirm').fadeOut()
}
})
//全局配置
if (token) {
$.ajaxSetup({
headers: {
'Authorization': token
}
})
$('#load').trigger('click')
} else {
$('#login').trigger('click')
}
//查询按钮绑定事件
$('#search').click(function () {
$('tbody').empty();
// page pageSize name
let temp = {
...obj,
name: $('input:first').val(),
status: $('select:first').val(),
};
$.ajax({
url: baseURL + "/product/pageQuery",
method: "get",
data: Qs.stringify(temp),
success(res) {
console.log(res);
res.data.list.forEach(function (item, index) {
var newTr =
`
<tr>
<td>${index + 1}</td>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.price}</td>
<td>${item.status}</td>
<td>${item.category.name}</td>
<td><button class='toDelete' id='${item.id}'>删除</button><button class='toEdit' item = ${JSON.stringify(item)}>修改</button></td>
</tr>
`
$('tbody').append(newTr)
})
},
})
})
//给确定按钮绑定事件
$('.submit').click(function () {
var name = $('input[name=name]').val()
var status = $('input[type=radio]:checked').val()
var price = $('input[name = price]').val()
var description = $('textarea[name=description]').val()
//发送保存请求
$.ajax({
url: baseURL + '/product/saveOrUpdate',
method: 'post',
data: {
id: user ? user.id : "",
name,
status,
price,
description,
productCategoryId: 9441
},
success(res) {
console.log(res);
$('.dialog').fadeOut()
alert(res.message)
//刷新页面局部数据刷新
$('#load').trigger('click')
},
error(error) {
}
})
})
//给新增按钮绑定事件
$('#updata').click(function () {
$('.dialog').fadeIn()
//清空表单数据
var name = $('input[name=name]').val('')
var status = $('input[type=radio]:checked').prop('checked', false)
var price = $('input[name = price]').val('')
var description = $('textarea[name=description]').val('')
})
//模态框取消按钮
$('.cancel').click(function () {
$('.dialog').fadeOut()
})
//给修改按钮绑定事件
$('table tbody').on('click', '.toEdit', function () {
$('.dialog').fadeIn()
user = $(this).attr('item')
user = JSON.parse(user)
console.log(user);
点击修改显示数据
var name = $('input[name=name]').val(user.name)
var status = $('input[type=radio][value = ' + user.status + ']').prop('checked', true)
var price = $('input[name = price]').val(user.price)
var description = $('textarea[name=description]').val(user.description)
})
//修改模态框标题
$('.dialog_header').html('修改商品信息')
</script>
扫一扫
914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
