【layui数据表格】多选批量删除 增删改查

数据表格的增删改查

第一步：创建表格，id定位到表格名，data获取Ajax数据内容，field定位到ajax数据相对应的名字，toolbar定位到script的barDemo，通过lay-event="edit"来控制点击

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数据的名字

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时间

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删除

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来获取选中的数据

批量删除

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){})
})

最后贴一份完整的代码

	
		
		
		
		
		
		
		
		
		
		
	
	
		

			

				

					

					

						类型
						

							请选择
						
					
					

						标题
						

							
						
					
					

						发布时间
						

							

							~
							

						
					
					
					

						查询
						新增
					
					

				
				
				

				批量删除