Layui 数据表格批量删除和多条件搜索
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>