数据表格的增删改查
第一步:创建表格,id定位到表格名,data获取Ajax数据内容,field定位到ajax数据相对应的名字,toolbar定位到script
的barDemo
,通过lay-event="edit"
来控制点击
<table class="layui-hide" id="list" lay-filter="list" lay-data="{id:'list'}"></table>
var lists = [];
function renderTable(){
table.render({
elem: '#list',
data:lists,
limit: 10,
cols: [[
{type:'checkbox'}
,{field:'arttitle', minWidth:200, title: '标题'}
,{field:'itemname', minWidth:100, title: '类型', sort: true}
,{field:'addusername', width:80, title: '编辑人'}
,{field:'applydate', title: '发布时间', minWidth: 100}
,{fixed: 'right',title: '操作',toolbar: '#barDemo',minWidth: 250}
]]
,page: false,
loading: true
});
}
第二步:获取表格数据并展现,filters,lists,total
要先定义。filters里面是查询需要的内容,total = res.total;
是Ajax获取的总页数,lists = res.data;
是Ajax获取的数据内容,renderLaypage(page);
渲染分页,renderTable();
渲染表格
var filters = {}; // 搜索条件
var lists = [];
let total;
function listArticles(page) {
myloading(true)//加载效果
let para = {
page: page,
filters: {
arttitle:$("#arttitle").val(),
starttime: $("#starttime").val(),
endtime: $("#endtime").val(),
itemcode:$("#itemname").val(),
diccode:$('[data-role="option"]:selected').attr('data-diccode')
},
sorts: {},
}
listArticle(para).then(res => {
if(res.code == 1) {
myloading(false);
total = res.total;
lists = res.data;//Ajax数据
renderLaypage(page); //渲染分页
renderTable(); //渲染表格
}
})
}
第三步:创建分页,pagesize为id名,total定义总页数,listArticles为ajax数据的名字
<div id="pagesize" class="fr"></div>
let total;//定义总页数
function renderLaypage(page) {
laypage.render({
elem: 'pagesize',
count: total,
curr: page, //获取起始页
hash: 'fenye', //自定义hash值
layout: ['prev', 'page', 'next'],
jump: function(obj, first) {
if(!first) {
listArticles(obj.curr);
}
}
});
}
第四步:查询,每次查询相当于调一次列表接口,时间查询定位到id名starttime
和endtime
时间
<input class="layui-input" placeholder="请选择开始日期" name="starttime" id="starttime" />
<input class="layui-input" placeholder="请选择结束日期" name="endtime" id="endtime" />
laydate.render({
elem: '#starttime', //开始日期
trigger: 'click'
});
laydate.render({
elem: '#endtime', //结束日期
trigger: 'click'
});
$("#search").click(function() {
listArticles(1);
})
第五步:表格里的编辑和删除,是根据lay-event="edit"
来定位获取的。tool(list)
中list是table
的id名,编辑就跳转,获取artid删除
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit" data-role="artid">编辑</a>
<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="del" data-role="artid">删除</a>
</script>
table.on('tool(list)', function(obj) {
if(obj.event == 'edit') {//编辑
window.open('/system/article/edit.html?artid=' + obj.data.artid, '_self')
}
if(obj.event == 'del') {//删除
layer.confirm('确认删除该文章吗?', function(index) {
var para = {
artid: obj.data.artid
}
removeArticle(para).then(function(res) {
if(res.code == 1) {
listArticles(1);
layer.msg(res.msg, {
time: 2000,
icon: 6
});
} else {
layer.msg(res.msg, {
time: 2000,
icon: 5
});
}
})
})
}
})
第六步:批量删除,先要获取选中的数据有哪些,table.checkStatus('list')
list是表格id,获取artid名来删除,lay-filter="batchDel"
定位到表格,batchremoveArticle调取批量删除的接口,通过getCheckData
来获取选中的数据
<button class="batchDel layui-btn" lay-submit data-type="getCheckData" lay-filter="batchDel">批量删除</button>
function getCheckData() {
var checkStatus = table.checkStatus('list')
var data = checkStatus.data;
var artids = [];
data.forEach(function(v, i) {
artids.push(v.artid)
})
return artids
}
//批量删除
form.on('submit(batchDel)', function(data) {
if(getCheckData().length == 0) {
layer.msg("请先选择批量删除的内容", {time: 2000,icon: 5});
return;
}
layer.confirm('确认删除所有选中的内容吗?',{
cancel: function(index, layero){
}
}, function(index) {
var artids = getCheckData()
let para = {
"artid": artids,
}
batchremoveArticle(para).then(function(res) {
if(res.code == 1) {
listArticles(1);
layer.close(index);
layer.msg(res.msg, {time: 2000,icon: 6}); //成功信息提示
} else {
layer.msg(res.msg, {time: 2000,icon: 5});
}
})
return false
}, function(index, layero){})
})
最后贴一份完整的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台-文章管理-文章列表</title>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script>
var versions =Math.random();
document.write(' <link rel="stylesheet" href="/static/css/weadmin.css?v=' + versions + '" >');
document.write(' <link rel="stylesheet" href="/static/js/loading/loading.css?v=' + versions + '" >');
document.write(' <script src="/static/js/jquery-3.4.1.min.js?v=' + versions + '" charset="utf-8"></\script>');
document.write(' <script src="/lib/layui/layui.js?v=' + versions + '"></\script>');
document.write(' <script src="/static/js/loginvalidatesys.js?v=' + versions + '" charset="utf-8"></\script>');
document.write(' <script src="/api/api.js?v=' + versions + '" charset="utf-8"></\script>');
document.write(' <script src="/static/js/loading/loading.js?v=' + versions + '"></\script>');
</script>
</head>
<body>
<div class="weadmin-body">
<div class="article">
<form class="layui-form">
<div class="fl">
<div class="layui-form-item layuiformitem">
<span class="fl layuiformitems">类型</span>
<div class="layui-input-block layuiinputblock" style="width:150px">
<select name="articletype" lay-verify="required" data-role="articletype" id="itemname"><option value="">请选择</option></select>
</div>
</div>
<div class="layui-form-item layuiformitem">
<span class="fl layuiformitems">标题</span>
<div class="layui-input-block layuiinputblock">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" id="arttitle">
</div>
</div>
<div class="layui-form-item layuiformitem">
<span class="fl layuiformitems">发布时间</span>
<div class="layui-input-block " style="float:left;margin:0 10px 0 0">
<div class="layui-inline" style="margin-bottom:0;"><input class="layui-input" placeholder="请选择开始日期" name="starttime" id="starttime" /></div>
~
<div class="layui-inline" style="margin-bottom:0;"><input class="layui-input" placeholder="请选择结束日期" name="endtime" id="endtime" /></div>
</div>
</div>
</div>
<div class="fl">
<button type="button" class="layui-btn layui-btn-normal" id="search" lay-event="search">查询</button>
<a href="javascript:;" onclick="add_method()" ><button type="button" class="layui-btn">新增</button></a>
</div>
<div class="clear"></div>
</form>
<table class="layui-hide" id="list" lay-filter="list" lay-data="{id:'list'}"></table>
<div id="pagesize" class="fr"></div>
<button class="batchDel layui-btn layui-btn-danger" lay-submit data-type="getCheckData" lay-filter="batchDel"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop layui-hide" ></i>批量删除</button>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit" data-role="artid">编辑</a>
<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="del" data-role="artid">删除</a>
</script>
</div>
</div>
</body>
<script>
<!--新增页面跳转-->
function add_method(){
window.location.href = skipurl('/system/article/add.html');
}
layui.use(['form','table','laydate','laypage'], function(){
var table = layui.table;
var laydate = layui.laydate;
var form = layui.form;
var laypage = layui.laypage;
var lists = [];
var filters = {}; // 搜索条件
let total;
myloading(true);
laydate.render({
elem: '#starttime', //开始日期
trigger: 'click'
});
laydate.render({
elem: '#endtime', //结束日期
trigger: 'click'
});
listArticles(1);
//获取文类别
function wzlbArticles(){
wzlbArticle().then(res =>{
if(res.code==1){
console.log(res);
var htmls = '';
for(var i = 0;i<res.data.length;i++){
htmls += '<option value="'+res.data[i]['itemcode']+'" data-diccode="'+res.data[i]['diccode']+'" data-role="option">'+res.data[i]['itemname']+'</option>';
}
$('[data-role="articletype"]').append(htmls);
form.render('select');
}
})
}
wzlbArticles();
//列表
function listArticles(page) {
myloading(true)
let para = {
page: page,
filters: {
arttitle:$("#arttitle").val(),
starttime: $("#starttime").val(),
endtime: $("#endtime").val(),
itemcode:$("#itemname").val(),
diccode:$('[data-role="option"]:selected').attr('data-diccode')
},
sorts: {},
}
listArticle(para).then(res => {
if(res.code == 1) {
myloading(false);
// $('[data-role="artid"]').attr('data-artid',res.data);
total = res.total;
lists = res.data;
renderLaypage(page); //渲染分页
renderTable(); //渲染表格
}
})
}
//查询
$("#search").click(function() {
listArticles(1);
})
function renderTable(){
table.render({
elem: '#list',
data:lists,
limit: 10,
cols: [[
{type:'checkbox'}
,{field:'arttitle', minWidth:200, title: '标题'}
,{field:'itemname', minWidth:100, title: '类型', sort: true}
,{field:'addusername', width:80, title: '编辑人'}
,{field:'applydate', title: '发布时间', minWidth: 100}
,{fixed: 'right',title: '操作',toolbar: '#barDemo',minWidth: 250}
]]
,page: false,
loading: true
});
}
function renderLaypage(page) {
laypage.render({
elem: 'pagesize',
count: total,
curr: page, //获取起始页
hash: 'fenye', //自定义hash值
layout: ['prev', 'page', 'next'],
jump: function(obj, first) {
if(!first) {
listArticles(obj.curr);
}
}
});
}
//获取选中数据
function getCheckData() {
var checkStatus = table.checkStatus('list')
var data = checkStatus.data;
var artids = [];
data.forEach(function(v, i) {
artids.push(v.artid)
})
return artids
}
//批量删除
form.on('submit(batchDel)', function(data) {
if(getCheckData().length == 0) {
layer.msg("请先选择批量删除的内容", {
time: 2000,
icon: 5
});
return;
}
layer.confirm('确认删除所有选中的内容吗?',{
cancel: function(index, layero){
}
}, function(index) {
var artids = getCheckData()
let para = {
"artid": artids,
}
batchremoveArticle(para).then(function(res) {
if(res.code == 1) {
listArticles(1);
layer.close(index);
layer.msg(res.msg, {
time: 2000,
icon: 6
}); //成功信息提示
} else {
layer.msg(res.msg, {
time: 2000,
icon: 5
});
}
})
return false
}, function(index, layero){
})
})
table.on('tool(list)', function(obj) {
if(obj.event == 'edit') {//编辑
window.open('/system/article/edit.html?artid=' + obj.data.artid, '_self')
}
if(obj.event == 'del') {//删除
layer.confirm('确认删除该文章吗?', function(index) {
var para = {
artid: obj.data.artid
}
removeArticle(para).then(function(res) {
if(res.code == 1) {
listArticles(1);
layer.msg(res.msg, {
time: 2000,
icon: 6
});
} else {
layer.msg(res.msg, {
time: 2000,
icon: 5
});
}
})
})
}
})
});
</script>
</html>