layui数据表格批量删除
多条件搜索框：注样式自己写
<div class="demoTable" style="width: 968px;
margin:20px auto;color: #7185a2">
流水号：
<div class="layui-inline">
<input class="layui-input" name="FlowNumber" id="FlowNumber" autocomplete="off" style="height:30px;border:1px solid #7185a2">
</div>
账号：
<div class="layui-inline">
<input class="layui-input" name="UserName" id="UserName" autocomplete="off" style="height:30px;border:1px solid #7185a2">
</div>
咨询主题：
<div class="layui-inline">
<input class="layui-input" name="Topic" id="Topic" autocomplete="off" style="height:30px;border:1px solid #7185a2">
</div>
时间：
<div class="layui-inline">
<input class="layui-input" name="Time" id="Time" autocomplete="off" style="height:30px;border:1px solid #7185a2">
</div>
<button class="layui-btn" data-type="reload" style="height:30px;background:#7185a2;line-height:30px;">搜索</button>
</div>
删除按钮
<button class="layui-btn" data-type="getCheckData" style="background:#7185a2">批量删除</button>
<table id="dataProject" class="layui-table" lay-filter="test"></table> <!--数据表格渲染-->
<script>
layui.use(['table','laydate'], function(){
var table = layui.table;
laydate = layui.laydate;
//第一个实例
laydate.render({
elem: '#Time'
,theme: '#7185a2'
});
table.render({
elem: '#dataProject' //渲染dom
,url: './json/servertheme.json' //数据接口
,request:{
pageName: 'page' //页码的参数名称，默认：page
,limitName: 'size' //每页数据量的参数名，默认：limit
}
,response: {
statusName: 'code' //数据状态的字段名称，默认：code
,statusCode: 0 //成功的状态码，默认：0
,msgName: '' //状态信息的字段名称，默认：msg
,countName: 'count' //数据总数的字段名称，默认：count
,dataName: 'data' //数据列表的字段名称，默认：data
}
,cols: [[ //表头
// {field: 'projectId', title: 'ID', width:10}
{type: 'checkbox', fixed: 'left'}
,{field: 'FlowNumber', title: '流水号', width:91}
,{field: 'UserName', title: '账号',width:103}
,{field: 'projectName', title: '咨询主题',width:146}
,{field: 'projectShiXiang', title: '涉及事项',width:136}
,{field: 'time', title: '咨询时间',width:140}
,{field: 'state', title: '状态',width:87}
,{field: 'operation', title: '操作',toolbar:'#barDemo',width:140}
]]
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: [ 'prev', 'page', 'next', 'skip', 'count'] //自定义分页布局
,groups: 3 //只显示 1 个连续页码
,first: '首页' //不显示首页
,last: '尾页' //不显示尾页
,theme: '#7185a2'
}
,id: 'testReload'
,limit:6
});
table.on('tool(test)', function(obj) {//申报按钮
var data = obj.data;
var dataTitle =data.projectName;
if(obj.event ==="lookProject"){
var url='serverInfo.html'
//弹框部分
layer.open({
type: 2,
title:'查看——'+dataTitle,
shadeClose: true,
shade: 0.8,
offset:"100px",
move:false,
resize:false,
scrollbar:false,
area: ['700px', '150px'],
content:[url]
})
}else if(obj.event ==="del"){
var projectId = data.projectId;
}
})
var $ = layui.$, active = {
//注释：layui 搜索模块 Start
reload: function(){
var FlowNumber = $('#FlowNumber').val();
var UserName = $('#UserName').val();
var Topic = $('#Topic').val();
var Time = $('#Time').val();
table.reload('testReload', {
page: {
curr: 1
}
,where: {
FlowNumber: FlowNumber
,UserName: UserName
,Topic: Topic
,Time: Time
}
});
},
//注释：layui 搜索模块 End
//注释：layui 批量删除 Start
getCheckData:function(){
var checkStatus = table.checkStatus('testReload');// table.checkStatus是Layui中自带，id: 'testReload'可自定义
if(checkStatus.data.length==0){
parent.layer.msg('请先选择要删除的数据行！', {icon: 2});
return ;
}
var codeId= "";
for(var i=0;i<checkStatus.data.length;i++){
codeId += checkStatus.data[i].id+",";
}
parent.layer.msg('删除中...', {icon: 16,shade: 0.3,time:5000});
// 注释：把删除接口替换成url,http:///www.baidu.com只是案例地址
layer.confirm("您确定要删除吗？"+codeId,function(){
$.ajax({
type:"POST",
url: './json/servertheme.json',
data:{"id":codeId},
success:function (data) {
layer.closeAll('loading');
if(data.code==1){
parent.layer.msg('删除成功！', {icon: 1,time:2000,shade:0.2});
location.reload(true);
}else{
parent.layer.msg('删除失败！', {icon: 2,time:3000,shade:0.2});
}
}
})
})
};
//注释：layui 批量删除 End
//通用按钮
$('.layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
以上这篇Layui 数据表格批量删除和多条件搜索的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。