Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實(shí)例
layui數(shù)據(jù)表格批量刪除
多條件搜索框:注樣式自己寫
<div class="demoTable" style="width: 968px;
margin:20px auto;color: #7185a2">
流水號(hào):
<div class="layui-inline">
<input class="layui-input" name="FlowNumber" id="FlowNumber" autocomplete="off" style="height:30px;border:1px solid #7185a2">
</div>
賬號(hào):
<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>
時(shí)間:
<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;
//第一個(gè)實(shí)例
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: '流水號(hào)', width:91}
,{field: 'UserName', title: '賬號(hào)',width:103}
,{field: 'projectName', title: '咨詢主題',width:146}
,{field: 'projectShiXiang', title: '涉及事項(xiàng)',width:136}
,{field: 'time', title: '咨詢時(shí)間',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 個(gè)連續(xù)頁碼
,first: '首頁' //不顯示首頁
,last: '尾頁' //不顯示尾頁
,theme: '#7185a2'
}
,id: 'testReload'
,limit:6
});
table.on('tool(test)', function(obj) {//申報(bào)按鈕
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('請(qǐng)先選擇要?jiǎng)h除的數(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("您確定要?jiǎng)h除嗎?"+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ù)表格批量刪除和多條件搜索的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法
- 解決layui數(shù)據(jù)表格table的橫向滾動(dòng)條顯示問題
- layui 表格的屬性的顯示轉(zhuǎn)換方法
- Layui實(shí)現(xiàn)數(shù)據(jù)表格默認(rèn)全部顯示(不要分頁)
- 解決Layui數(shù)據(jù)表格顯示無數(shù)據(jù)提示的問題
- layui 表格操作列按鈕動(dòng)態(tài)顯示的實(shí)現(xiàn)方法
- layui 實(shí)現(xiàn)表格某一列顯示圖標(biāo)
- 解決LayUI數(shù)據(jù)表格復(fù)選框不居中顯示的問題
- layui實(shí)現(xiàn)數(shù)據(jù)表格點(diǎn)擊搜索功能
- 基于layui實(shí)現(xiàn)高級(jí)搜索(篩選)功能
- layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能(搜索功能)
- layui實(shí)現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能示例
相關(guān)文章
JavaScript中實(shí)現(xiàn)鍵值對(duì)應(yīng)的字典與哈希表結(jié)構(gòu)的示例
字典或者哈希表這樣的鍵值對(duì)應(yīng)結(jié)構(gòu)在其他很多語言中都有內(nèi)置,非常好用,這里我們來看一下JavaScript中實(shí)現(xiàn)鍵值對(duì)應(yīng)的字典與哈希表結(jié)構(gòu)的示例:2016-06-06
uniapp實(shí)現(xiàn)微信公眾號(hào)支付的方法步驟
本文主要介紹了uniapp實(shí)現(xiàn)微信公眾號(hào)支付的方法步驟,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
javascript針對(duì)cookie的基本操作實(shí)例詳解
這篇文章主要介紹了javascript針對(duì)cookie的基本操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript操作cookie的基本技巧,并給出了一個(gè)JavaScript操作cookie的完整類,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
詳解通用webpack多頁面自動(dòng)導(dǎo)入方案
本文主要介紹了通用webpack多頁面自動(dòng)導(dǎo)入方案,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
前端實(shí)現(xiàn)文本超出指定行數(shù)顯示"展開"和"收起"效果詳細(xì)步驟
本文介紹如何使用JavaScript原生代碼實(shí)現(xiàn)文本折疊展開效果,并提供方法指導(dǎo)如何在Vue或React等框架中修改實(shí)現(xiàn),詳細(xì)介紹了創(chuàng)建整體框架、設(shè)置樣式及利用JS控制元素的步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
uniapp項(xiàng)目打包為桌面應(yīng)用的方法步驟
本文主要介紹了uniapp項(xiàng)目打包為桌面應(yīng)用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-08-08
JavaScript常見函數(shù)類型和用途實(shí)現(xiàn)場(chǎng)景分析
在JavaScript中,除了惰性函數(shù)和防抖函數(shù)外,還有許多其他有用的函數(shù)模式和功能函數(shù),以下是一些常見的函數(shù)類型和用途,感興趣的朋友一起看看吧2024-12-12
JavaScript中十種一步拷貝數(shù)組的方法實(shí)例詳解
JavaScript中我們經(jīng)常會(huì)遇到拷貝數(shù)組的場(chǎng)景,但是都有哪些方式能夠來實(shí)現(xiàn)呢,我們不妨來梳理一下,感興趣的朋友跟隨小編一起看看吧2019-04-04

