LayUI实现增删改查
1.HTML页面
//引入layui的css文件
//引入layui的js文件
2.js文件(index.js)
layui.use(['jquery', 'table', 'laypage', 'form', 'element', 'upload', 'util', 'layer', 'table'], function() {
let laypage = layui.laypage;
let form = layui.form;
let layer = layui.layer;
let table = layui.table;
let $ = layui.$;
var upload = layui.upload;
//获取token
let token = sessionStorage.getItem("accessToken");
//table实例
table.render({
elem: '#tableTree',
url: '查询数据接口', //数据接口
page: true, //开启分页
method: 'post',
contentType: 'application/json',
headers: {
'Authorization': token
},
request: {
pageName: 'page',
limitName: 'pageSize'
},
cols: [
[{
type: 'checkbox',
width: 50,
align: 'center',
},
{
field: 'LAY_TABLE_INDEX',
title: '序号',
width: 100,
sort: true,
align: 'center'
},
{
field: 'id',
title: 'ID',
width: 100,
sort: true,
align: 'center'
},
{
field: 'feedbackClassification',
title: '分类',
align: 'center'
},
{
field: 'orderNo',
title: '排序',
width: 100,
align: 'center'
}, {
field: 'toolbarDemo',
title: '操作',
align: 'center',
toolbar: '#toolbarDemo'
}
]
],
parseData: function(res) {
if (res.code == 200) {
console.log(res)
let result = {
code: 0,
data: res.data.resultData,
msg: res.message,
count: res.data.total
}
return result;
}
if (res.code == 503) {
let result = {
code: 0,
data: null,
msg: '暂无数据',
count: 0
}
return result;
}
}
});
//监听工具栏
table.on('tool(test)', function(obj) {
let data = obj.data; //获得当前行数据
let con = obj.event;
switch (obj.event) {
case 'isOpen'://修改状态
if (data.isOpen === 0) {
data.isOpen = 1;
} else {
data.isOpen = 0;
}
changeStatus(data);
break;
case 'del'://删除
deleteData(data);
break;
case 'edit'://修改
console.log("修改")
editData(data);
break;
}
});
//改变状态
function changeStatus(data) {
console.log(data.id);
console.log(data.isOpen);
let mData = {
id: data.id,
state: data.isOpen // 后端会将值翻转
}
sendPost($, token, "修改状态url", mData, function(res) {
if (res.code === 200) {
table.reload('tableTree', {
where: {} //设定异步数据接口的额外参数
});
layer.msg("状态改变成功", {
icon: 1,
time: 1000
});
}
});
}
//修改
function editData(data) {
$("#form")[0].reset();
form.val('form', data);
let index = layer.open({
type: 1, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
closeBtn: 2, //×的样式
skin: 'layui-layer-molv',
area: ['50%', '50%'],
title: ['修改', 'font-size:18px'],
shadeClose: true,
maxmin: true, //允许全屏最小化
shade: 0, //不显示遮罩
//area: ['30%','75%'],//增加框的宽高
content: $('#popSearchRoleTest') // $('#id')
// skin:'demo-class'//自定义样式风格
,
end: function() {
$('#submit').unbind('click');
}
});
$('#submit').click(function() {
let formData = form.val('form');
// data.id = data.id;
console.log(data)
$.ajax({
type: "POST",
url: "编辑url",
async: true,
data: JSON.stringify({
"id":data.id,
"feedbackClassification": formData.feedbackClassification,
"orderNo": formData.orderNo,
}),
dataType: "JSON",
contentType: "application/json;charset:utf-8",
headers: {
Authorization: token,
},
success: function(data) {
if (data.code === 200) {
layer.close(index);
table.reload('tableTree', {
where: {} //设定异步数据接口的额外参数
});
layer.msg("修改成功", {
icon: 1,
time: 1000
});
}
},
error: function() {},
});
return false;
});
}
//添加
$(".add").on("click", function() {
$("#form")[0].reset();
let index = layer.open({
type: 1, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
closeBtn: 2, //×的样式
skin: 'layui-layer-molv',
area: ['50%', '50%'],
title: ['添加分类', 'font-size:18px'],
shadeClose: true,
maxmin: true, //允许全屏最小化
shade: 0, //不显示遮罩
//area: ['30%','75%'],//增加框的宽高
content: $('#popSearchRoleTest'), // $('#id')
// skin:'demo-class'//自定义样式风格
end: function() {
$('#submit').unbind('click');
// $("#form")[0].reset();
}
});
$('#submit').on("click", function() {
let data = form.val('form');
//添加数据
$.ajax({
type: "POST",
url: "新增url",
data: JSON.stringify({
"feedbackClassification": data.feedbackClassification,
"orderNo": data.orderNo,
}),
dataType: "JSON",
contentType: "application/json",
headers: {
Authorization: token,
},
success: function(data) {
if (data.code === 200) {
layer.close(index);
table.reload('tableTree', {
where: {} //设定异步数据接口的额外参数
});
//重载表单
form.render('select');
}
},
error: function() {},
});
});
});
//删除
function deleteData(data) {
$.ajax({
type: "POST",
url: "删除url",
async: true,
data: JSON.stringify([{
"id":data.id
}]),
dataType: "JSON",
contentType: "application/json",
headers: {
Authorization: token,
},
success: function(data) {
if (data.code === 200) {
layer.msg("删除成功", {
icon: 1,
time: 1000
});
//关闭
table.reload('tableTree', {
where: {} //设定异步数据接口的额外参数
});
}
},
error: function() {},
});
}
});
3.css文件（commond.css）
.admin-top {
/* 管理管理员页面顶部 */
width: 98%;
margin: 1rem auto;
padding: 0.5rem 1rem;
background: #FFFFFF;
box-sizing: border-box;
border: 1px solid #fff;
border-radius: 3px;
}
.layui-table img {
max-width: 32px;
}
a {
text-decoration: none;
color: black;
margin: 0 0.5rem;
}
#toolbar a{
float:left;
margin: 0 !important;
}
changeBorder{
margin: 10rpx;
}
/*正常的未被访问过的链接*/
a:link {
text-decoration: none;
}
/*已经访问过的链接*/
a:visited {
text-decoration: none;
}
/*鼠标划过(停留)的链接*/
a:hover {
text-decoration: none;
}
/* 正在点击的链接*/
a:active {
text-decoration: none;
}
.admin-top a {
/* 顶部a标签样式 */
font-weight: 600;
}
.screening {
/* 筛选条件 */
width: 98%;
margin: auto;
background: #FFFFFF;
padding: 10px 0;
box-sizing: border-box;
border-radius: 3px;
/* overflow: hidden; */
}
.screening form {
/* 筛选表单 */
padding: 10px 0;
margin: 0 1rem;
position: relative;
/*overflow: hidden;*/
display: flex;
flex-direction: row;
}
.inputBar {
/* 单个选择项 */
position: relative;
float: left;
}
.screening form label {
/* */
padding-left: 0.1rem !important;
padding-right: 0.1rem !important;
}
.screening-left{
display: inline-block;
width: 100px !important;
margin-left: 10px;
}
.layui-btn{margin-left: 10px;}
.changeCheckbox{padding:5px;}
.promotionlevelleft{
background-color: white;
}
4.commond.js
function getLayerOpen(obj, name, idObj) {
let index = obj.open({
type: 1, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
closeBtn: 2, //×的样式
skin: 'layui-layer-molv',
area: ['100%', '100%%'],
title: [name, 'font-size:18px'],
shadeClose: true,
maxmin: true, //允许全屏最小化
shade: 0, //不显示遮罩
//area: ['30%','75%'],//增加框的宽高
content: idObj // $('#id')
});
return index;
}
function getLayerOpenAll(obj, name, idObj, weight, height, type) {
let index = obj.open({
type: type, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
closeBtn: 2, //×的样式
skin: 'layui-layer-molv',
area: [weight, height],
title: [name, 'font-size:18px'],
shadeClose: true,
maxmin: true, //允许全屏最小化
shade: 0, //不显示遮罩
//area: ['30%','75%'],//增加框的宽高
content: idObj // $('#id')
});
return index;
}
function sendAjax(method, url, isAsync, param) {
$.ajax({
type: method,
url: url,
async: isAsync,
data: JSON.stringify(param),
dataType: "JSON",
contentType: "application/json;charset:utf-8",
headers: {
Authorization: token,
},
success: function(data) {
return data;
},
error: function() {},
});
return null;
}
function sendPostAjax(url, param) {
$.ajax({
type: "POST",
url: url,
async: true,
data: JSON.stringify(param),
dataType: "JSON",
contentType: "application/json;charset:utf-8",
headers: {
Authorization: token,
},
success: function(data) {
return data;
},
error: function() {},
});
return null;
}
sendPost = function (obj,token,url,param,callback) {
obj.ajax({
type: "POST",
url: url,
async: true,
data: JSON.stringify(param),
dataType: "JSON",
contentType: "application/json;charset:utf-8",
headers: {
Authorization: token,
},
success: function(data) {
callback(data);
},
error: function() {},
});
}
sendGet = function (obj,token,url,param,callback) {
obj.ajax({
type: "Get",
url: url,
async: true,
data: JSON.stringify(param),
dataType: "JSON",
contentType: "application/json;charset:utf-8",
headers: {
Authorization: token,
},
success: function(data) {
callback(data);
},
error: function() {},
});
}
function sendGetAjax(url, param) {
$.ajax({
type: "Get",
url: url,
async: true,
data: JSON.stringify(param),
dataType: "JSON",
contentType: "application/json;charset:utf-8",
headers: {
Authorization: token,
},
success: function(data) {
return data;
},
error: function() {},
});
return null;
}