<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增删改查示例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css" />
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<blockquote class="layui-elem-quote">
<a class="layui-btn layui-btn-sm" id="addBtn">添加</a>
<a class="layui-btn layui-btn-sm layui-btn-danger" id="delBtn">删除</a>
<a class="layui-btn layui-btn-sm" id="importBtn">导入</a>
<a class="layui-btn layui-btn-sm" id="exportBtn">导出</a>
<div class="layui-inline">
<label class="layui-form-label">关键字：</label>
<div class="layui-input-inline">
<input type="text" id="keyword" class="layui-input">
</div>
<button class="layui-btn layui-btn-sm" id="searchBtn">搜索</button>
</div>
</blockquote>
</div>
<div class="layui-col-md12">
<table class="layui-table" id="dataTable" lay-filter="dataTable"></table>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
layui.use(['table', 'form', 'layer'], function () {
var table = layui.table,
form = layui.form,
layer = layui.layer;
//渲染表格
var dataTable = table.render({
elem: '#dataTable',
url: '/api/data',
method: 'get',
page: true,
cols: [[
{ type: 'checkbox' },
{ field: 'id', title: 'ID', width: 80 },
{ field: 'name', title: '姓名', width: 120 },
{ field: 'age', title: '年龄', width: 80 },
{ field: 'gender', title: '性别', width: 80 },
{ field: 'phone', title: '电话', width: 150 },
{ field: 'email', title: '邮箱', width: 200 },
{ field: 'address', title: '地址', width: 300 },
{ field: 'create_time', title: '创建时间', width: 180 },
{ fixed: 'right', title: '操作', toolbar: '#toolbar', width: 120 }
]]
});
//监听工具条
table.on('tool(dataTable)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
//编辑操作
layer.open({
type: 2,
title: '编辑',
content: '/edit?id=' + data.id,
area: ['600px', '400px']
});
} else if (obj.event === 'delete') {
//删除操作
layer.confirm('确定删除该记录吗？', function (index) {
$.ajax({
url: '/api/data/' + data.id,
type: 'delete',
success: function (res) {
if (res.code === 0) {
layer.msg('删除成功');
obj.del();
} else {
layer.msg(res.msg);
}
},
error: function () {
layer.msg('删除失败');
}
});
layer.close(index);
});
}
});
//添加操作
$('#addBtn').on('click', function () {
layer.open({
type: 2,
title: '添加',
content: '/add',
area: ['600px', '400px']
});
});
//删除操作
$('#delBtn').on('click', function () {
var checkStatus = table.checkStatus('dataTable'),
data = checkStatus.data;
if (data.length === 0) {
layer.msg('请选择要删除的记录');
} else {
layer.confirm('确定删除选中的记录吗？', function (index) {
var ids = [];
for (var i = 0; i < data.length; i++) {
ids.push(data[i].id);
}
$.ajax({
url: '/api/data',
type: 'delete',
data: { ids: ids },
success: function (res) {
if (res.code === 0) {
layer.msg('删除成功');
dataTable.reload();
} else {
layer.msg(res.msg);
}
},
error: function () {
layer.msg('删除失败');
}
});
layer.close(index);
});
}
});
//搜索操作
$('#searchBtn').on('click', function () {
var keyword = $('#keyword').val();
dataTable.reload({
where: { keyword: keyword }
});
});
//导入操作
$('#importBtn').on('click', function () {
layer.open({
type: 2,
title: '导入',
content: '/import',
area: ['600px', '400px']
});
});
//导出操作
$('#exportBtn').on('click', function () {
window.location.href = '/api/export';
});
});
</script>
<script type="text/html" id="toolbar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
</body>
</html>
OPPO公司福利 1013人发布
查看24道真题和解析