layui数据表格批量删除
多条件搜索框：注样式自己写 <div> 流水号： <div> <input autocomplete="off"> </div> 账号： <div> <input autocomplete="off"> </div> 咨询主题： <div> <input autocomplete="off"> </div> 时间： <div> <input autocomplete="off"> </div> <button data-type="reload">搜索</button> </div> 删除按钮 <button data-type="getCheckData">批量删除</button> <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,只是案例地址 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 数据表格批量删除和多条件搜索的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: