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 數據表格批量刪除和多條件搜索的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答