Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實例
layui數(shù)據(jù)表格批量刪除
多條件搜索框:注樣式自己寫 <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> <!--數(shù)據(jù)表格渲染-->
<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' //數(shù)據(jù)接口 ,request:{ pageName: 'page' //頁碼的參數(shù)名稱,默認(rèn):page ,limitName: 'size' //每頁數(shù)據(jù)量的參數(shù)名,默認(rèn):limit } ,response: { statusName: 'code' //數(shù)據(jù)狀態(tài)的字段名稱,默認(rèn):code ,statusCode: 0 //成功的狀態(tài)碼,默認(rèn):0 ,msgName: '' //狀態(tài)信息的字段名稱,默認(rèn):msg ,countName: 'count' //數(shù)據(jù)總數(shù)的字段名稱,默認(rèn):count ,dataName: 'data' //數(shù)據(jù)列表的字段名稱,默認(rèn):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: '狀態(tài)',width:87} ,{field: 'operation', title: '操作',toolbar:'#barDemo',width:140} ]] ,page: { //支持傳入 laypage 組件的所有參數(shù)(某些參數(shù)除外,如:jump/elem) - 詳見文檔 layout: [ 'prev', 'page', 'next', 'skip', 'count'] //自定義分頁布局 ,groups: 3 //只顯示 1 個連續(xù)頁碼 ,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('請先選擇要刪除的數(shù)據(jù)行!', {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 數(shù)據(jù)表格批量刪除和多條件搜索的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法
- 解決layui數(shù)據(jù)表格table的橫向滾動條顯示問題
- layui 表格的屬性的顯示轉(zhuǎn)換方法
- Layui實現(xiàn)數(shù)據(jù)表格默認(rèn)全部顯示(不要分頁)
- 解決Layui數(shù)據(jù)表格顯示無數(shù)據(jù)提示的問題
- layui 表格操作列按鈕動態(tài)顯示的實現(xiàn)方法
- layui 實現(xiàn)表格某一列顯示圖標(biāo)
- 解決LayUI數(shù)據(jù)表格復(fù)選框不居中顯示的問題
- layui實現(xiàn)數(shù)據(jù)表格點(diǎn)擊搜索功能
- 基于layui實現(xiàn)高級搜索(篩選)功能
- layui數(shù)據(jù)表格實現(xiàn)重載數(shù)據(jù)表格功能(搜索功能)
- layui實現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能示例
相關(guān)文章
countUp.js實現(xiàn)數(shù)字動態(tài)變化效果
這篇文章主要為大家詳細(xì)介紹了countUp.js實現(xiàn)數(shù)字動態(tài)變化效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-10-10JavaScript實現(xiàn)鼠標(biāo)經(jīng)過表格某行時此行變色
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)鼠標(biāo)經(jīng)過表格某行時此行變色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11JavaScript cookie的設(shè)置獲取刪除詳解
這篇文章主要介紹了JavaScript cookie的設(shè)置獲取刪除等等,,需要的朋友可以參考下2014-02-02JS控制圖片翻轉(zhuǎn)示例代碼(兼容firefox,ie,chrome)
本篇文章主要介紹了JS控制圖片翻轉(zhuǎn)示例代碼(兼容firefox,ie,chrome) 需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12理解Javascript_11_constructor實現(xiàn)原理
在理解了'對象模型'后,我們就可以看一下constructor屬性是如何實現(xiàn)的.2010-10-10基于Bootstrap實現(xiàn)的下拉菜單手機(jī)端不能選擇菜單項的原因附解決辦法
小編使用bootstrap做的下拉菜單在電腦瀏覽器中可以正常使用,在手機(jī)瀏覽器中能彈出下拉列表卻不能選擇列表中的菜單項,怎么回事,如何解決呢?下面小編給大家分享下具體原因及解決辦法,一起看下吧2016-07-07js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent
這篇文章主要介紹了js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04JS 中forEach,for in、for of用法實例總結(jié)
這篇文章主要介紹了JS 中forEach,for in、for of用法,結(jié)合實例形式總結(jié)分析了JS 中forEach,for in、for of的基本功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2023-05-05