Layui数据表格多选表格行实现批量删除
参考自layui官网实例：https://www.layui.com/demo/table.html
layui是一个很好用的轻量级前后端框架，其中有很多自己封装的方法供用户使用，其中的数据表格对于后端人员来说更是不可多得的好工具。
今天在使用layui的数据表格模块时，发现了layui的数据表格模块只提供了单行数据的删除，那是layui的数据表格工具条的方法，即layui数据表格自带的工具条工具，没有多选数据进行删除的方法，
经过网上查询资料等等，发现网上都没有直接实现数据表格多行删除的功能，有的都是全选删除，即一次性全部删除所有的表格信息，所以自己写了一个进行多行删除的案例
// 批量删除，
$("#delSelect").on('click', function () {
//获得表格CheckBox已经选中的行的信息
var checkStatus = table.checkStatus('info'),
//返回行的value
data = checkStatus.data;
if (data.length > 0) {
layer.confirm('确定删除选中的用户？', {icon: 3, title: '提示信息'}, function (index) {
//layui中找到CheckBox所在的行，并遍历找到行的顺序
$("div.layui-table-body table tbody input[name='layTableCheckbox']:checked").each(function () { // 遍历选中的checkbox
n = $(this).parents("tbody tr").index(); // 获取checkbox所在行的顺序
//移除行
$("div.layui-table-body table tbody ").find("tr:eq(" + n + ")").remove();
//如果是全选移除，就将全选CheckBox还原为未选中状态
$("div.layui-table-header table thead div.layui-unselect.layui-form-checkbox").removeClass("layui-form-checked");
});
layer.close(index);
})
} else {
layer.msg("请选择需要删除的行");
}
});//批量删除操作结束
我发现了layui的数据表格的表格行数据加载不是直接加载在table标签中，而是放在额外的div容器中，
所以在选择的时候我就直接选择了复选框checkbox所在的容器去进行删除，初学者，所以代码会有点冗余复杂，望大家多多见谅
实现后还有一个小bug，点击全选按钮之后取消进行的多选，再取消几个的多选，就会删除全部数据，并不会保留没有勾选的数据行，以后会改进
全部代码如下：
HTML页面代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>数据展示title>
<link rel="stylesheet" href="layui/css/layui.css" type="text/css">
<style>
label.layui-form-label {
text-align: left;
}
style>
head>
<body>
<fieldset class="layui-elem-field">
<legend style="text-align: center">
<h1>学生信息数据列表h1>
legend>
<div class="layui-field-box">
<div class="layui-row">
<div class="layui-col-md8 ">
<form action="#1" class="layui-form">
<div class="layui-inline">
姓名
<div class="layui-input-inline">
<input type="text" name="" autocomplete="off" class="layui-input layui-inputxs">
div>
年龄
<div class="layui-input-inline">
<input type="text" name="" autocomplete="off" class="layui-input">
div>
邮箱
<div class="layui-input-inline">
<input type="text" name="" autocomplete="off" class="layui-input">
div>
div>
<div class="layui-inline">
<div class="layui-input-inline">
<button type="button" name="" class="layui-btn" id="search">查询button>
div>
div>
form>
div>
<div class="layui-col-md4">
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-warm" id="delSelect">
<i class="layui-icon layui-icon-delete">i>
批量删除
button>
<button type="button" class="layui-btn" id="addNewInfo">
<i class="layui-icon layui-icon-add-1">i>
添加
button>
div>
div>
div>
<table class="layui-table" lay-filter="test" lay-data="{id: 'info'}" id="info">table>
div>
fieldset>
<fieldset class="layui-elem-field" id="editPage" style="display: none;">
<legend style="text-align: center">
学生信息数据添加
legend>
<div class="layui-field-box">
<form action="#2" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">姓名label>
<input type="text" name="" autocomplete="off" class="layui-input">
div>
<div class="layui-form-item">
<label class="layui-form-label">年龄label>
<input type="text" name="" autocomplete="off" class="layui-input">
div>
<div class="layui-form-item">
<label class="layui-form-label">生日label>
<input type="text" name="" autocomplete="off" class="layui-input">
div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱label>
<input type="text" name="" autocomplete="off" class="layui-input">
div>
<div class="layui-form-item">
<label class="layui-form-label">自我介绍label>
<textarea name="introduceSelf" id="" class="layui-textarea" lay-verify="required">textarea>
div>
form>
div>
fieldset>
<script type="text/html" id="actionBar">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js">script>
<script src="js/layTable.js">script>
body>
html>
功能实现layTable.js代码
layui.use(['table', 'jquery'], function() {
let table = layui.table
let $ = layui.jquery
let tableIns = table.render({
elem: '#info'
, url: 'info.json'
, cols: [
[{
type: 'checkbox',
fixed: 'left'
}, {
field: 'id',
title: '编号',
sort: 'true'
}, {
field: 'name',
title: '用户名',
edit: 'text',
width: 120
}, {
field: 'age',
title: '年龄',
sort: true
}, {
field: 'email',
title: '邮箱',
edit: 'text'
}, {
field: 'birthday',
title: '生日',
sort: true
}, {
field: 'details',
title: '简介',
}, {
fixed: 'right',
title: '操作',
toolbar: '#actionBar',
width: 150
}]
]
, page: {
layout: ['prev', 'page', 'next', 'count']
}
, title: '学生信息表'
, height: 425
, id: 'info'
, loading: true
})//table设置基本参数
//监听行工具事件
table.on('tool(test)', function(obj) {
let data = obj.data
//获得当前行的DOM
let tr = obj.tr
if (obj.event === 'del') {
layer.confirm('确定删除吗?', function(index) {
obj.del()
layer.close(index)
})
} else if (obj.event === 'edit') {
layer.prompt({
formType: 2
, value: data.email
}, function(value, index) {
obj.update({
email: value
})
layer.close(index)
})
}
}) //监听行工具事件结束
//添加按钮的事件
$('#addNewInfo').on('click', function() {
let newInfo = layer.open({
title: '编辑'
, content: $('#editPage')//页面选择器
, type: 1//页面选择器
, area: ['500px']
, btn: ['确认添加', '取消']
, yes: function(index, layero) {
//按钮【按钮一，默认成功】的回调
layer.msg('提交成功', {icon: 1, time: 2000}, function() {
layer.close(newInfo)
})
}
, btn2: function(index, layero) {
//按钮【按钮二】的回调
}
, cancel: function() {
//右上角关闭回调
// return false 开启该代码可禁止点击该按钮关闭
}
})
})
// 批量删除，
$('#delSelect').on('click', function() {
//获得表格CheckBox已经选中的行的信息
let checkStatus = table.checkStatus('info'),
//返回行的value
data = checkStatus.data
if (data.length > 0) {
layer.confirm('确定删除选中的用户？', {icon: 3, title: '提示信息'}, function(index) {
//layui中找到CheckBox所在的行，并遍历找到行的顺序
$('div.layui-table-body table tbody input[name="layTableCheckbox"]:checked').each(function() { // 遍历选中的checkbox
n = $(this).parents('tbody tr').index() // 获取checkbox所在行的顺序
//移除行
$('div.layui-table-body table tbody ').find('tr:eq(' + n + ')').remove()
//如果是全选移除，就将全选CheckBox还原为未选中状态
$('div.layui-table-header table thead div.layui-unselect.layui-form-checkbox').removeClass('layui-form-checked')
})
layer.close(index)
})
} else {
layer.msg('请选择需要删除的行')
}
})//批量删除操作结束
//查询功能
$('button#search').click(function() {
layer.msg('该功能还在开发中...', {icon: 5})
})
})//layui.use函数
json数据
{
"code": "0",
"msg": "",
"count": "10",
"data": [
{
"id": 935,
"name": "江秀兰",
"age": 4147017943049006,
"birthday": "2014-03-16",
"email": "[email protected]",
"details": "宋勇"
},
{
"id": 970,
"name": "毛敏",
"age": 5116280338762030,
"birthday": "2005-03-18",
"email": "[email protected]",
"details": "贾明"
},
{
"id": 369,
"name": "孙娜",
"age": 2763152458425208,
"birthday": "1998-03-02",
"email": "[email protected]",
"details": "杨平"
},
{
"id": 13,
"name": "曹伟",
"age": 1356633505556362,
"birthday": "1978-05-19",
"email": "[email protected]",
"details": "崔平"
},
{
"id": 320,
"name": "史强",
"age": 4886544367125658,
"birthday": "1997-11-26",
"email": "[email protected]",
"details": "康敏"
},
{
"id": 857,
"name": "魏明",
"age": 1449925015594196,
"birthday": "1993-09-18",
"email": "[email protected]",
"details": "江秀兰"
},
{
"id": 474,
"name": "邹静",
"age": 88275121412674,
"birthday": "1976-07-11",
"email": "[email protected]",
"details": "石艳"
},
{
"id": 710,
"name": "龚静",
"age": 4284522719231460,
"birthday": "1976-08-21",
"email": "[email protected]",
"details": "夏娟"
},
{
"id": 957,
"name": "蒋军",
"age": 1316806026130408,
"birthday": "2017-10-26",
"email": "[email protected]",
"details": "石芳"
},
{
"id": 583,
"name": "阎伟",
"age": 2813604300486156,
"birthday": "1991-11-02",
"email": "[email protected]",
"details": "姚刚"
}
]
这是第一次写博客，写的不好还请多多见谅