layui監(jiān)聽復(fù)選框checkbox選中以及分頁選中處理方式
更新時(shí)間:2025年04月01日 15:42:51 作者:hexu_blog
這篇文章主要介紹了layui監(jiān)聽復(fù)選框checkbox選中以及分頁選中處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
layui監(jiān)聽復(fù)選框checkbox選中及分頁選中處理
具體實(shí)現(xiàn)代碼如下:
需要關(guān)注三個(gè)位置
- done表格加載完畢方法
- cols中復(fù)選框欄定義
- table.on中對(duì)復(fù)選框選中或取消的狀態(tài)定義
這三個(gè)地方的代碼直接復(fù)制去用就行了
最終選中的數(shù)據(jù)id為:ids
<script>
layui.use(['table', 'form', 'upload','laydate'], function () {
// 設(shè)置全局變量以保存選中行信息(僅需要id的話在你的業(yè)務(wù)位置調(diào)用ids即可,數(shù)據(jù)格式是int數(shù)組)
let ids = new Array();
// 存儲(chǔ)所有選中的數(shù)據(jù)(需要行內(nèi)全量數(shù)據(jù)在你的業(yè)務(wù)位置調(diào)用lists即可,數(shù)據(jù)格式是對(duì)象集合)
var lists = new Array();
// 保存當(dāng)前頁全部數(shù)據(jù)id,點(diǎn)擊全選時(shí)使用
let tableIds = new Array();
//第一個(gè)實(shí)例
table.render({
elem: '#currentTableId'
, method: "post"
, dataType: "Json"
, id: 'layuiReload'
, url: '/page/severalquality/getshipPlan' //數(shù)據(jù)接口
, toolbar: '#toolbarTem'
, page: true //開啟分頁
, done: function (res, curr, count) {
// 設(shè)置當(dāng)前頁全部數(shù)據(jù)id到全局變量
tableIds = res.data.map(function (value) {
return value.id;
});
// 設(shè)置當(dāng)前頁選中項(xiàng)
$.each(res.data, function (idx, val) {
if (ids.indexOf(val.id) > -1) {
val["LAY_CHECKED"] = 'true';
//找到對(duì)應(yīng)數(shù)據(jù)改變勾選樣式,呈現(xiàn)出選中效果
let index = val['LAY_TABLE_INDEX'];
$('tr[data-index=' + index + '] input[type="checkbox"]').click();
form.render('checkbox'); //刷新checkbox選擇框渲染
}
});
// 獲取表格勾選狀態(tài),全選中時(shí)設(shè)置全選框選中
let checkStatus = table.checkStatus('test');
if (checkStatus.isAll) {
$('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
form.render('checkbox'); //刷新checkbox選擇框渲染
}
}
, cols: [[ //表頭
{ field: 'id', title: '數(shù)據(jù)編號(hào)', sort: true, hide: true }
, { field: 'id', sort: true, type: 'checkbox' }//在此聲明表格復(fù)選框
, { field: 'DataNumber', align: 'center', title: '序號(hào)', width: 60, type: 'numbers' }
, { field: 'shiptitle', align: 'center', title: '船名' }
, { field: 'carrierstitle', align: 'center', title: '承運(yùn)商' }
, { field: 'startPortName', align: 'center', title: '始發(fā)港' }
, { field: 'destPortName', align: 'center', title: '到港' }
, { field: 'arrivalTime', align: 'center', title: '運(yùn)達(dá)時(shí)間' }
, { field: 'shipmentTon', align: 'center', title: '裝油量' }
, { field: 'realTon', align: 'center', title: '卸油量' }
, {
field: 'superConsumption', align: 'center', title: '是否超耗索賠', hide: true, templet: function (res) {
if (res.superConsumption == true) {
return "是";
} else {
return "否";
}
}
}
, { field: 'claimSum', align: 'center', title: '索賠量' }
, { field: 'practicalprice', align: 'center', title: '實(shí)際索賠金額' }
, { field: 'claimcompensationInfostateName', align: 'center', title: '索賠狀態(tài)' }
, { field: 'auditremark', align: 'center', title: '審核備注', hide: true }
]]
});
//使用on監(jiān)聽checkbox選中狀態(tài)并進(jìn)行處理(tableFilter為table的lay-filter值)
table.on('checkbox(tableFilter)', function (obj) {
if (obj.checked == true) {
if (obj.type == 'one') {
ids.push(obj.data.id);
lists.push(obj.data);
} else {
for (let i = 0; i < tableIds.length; i++) {
//當(dāng)全選之前選中了部分行進(jìn)行判斷,避免重復(fù)
if (ids.indexOf(tableIds[i]) == -1) {
ids.push(tableIds[i]);
var checkStatus = table.checkStatus('layuiReload'); //layuiReload 為table聲明的id
lists.push(checkStatus.data[i]);
}
}
}
} else {
if (obj.type == 'one') {
let i = ids.length;
while (i--) {
if (ids[i] == obj.data.id) {
ids.splice(i, 1);
lists.splice(i, 1);
}
}
} else {
let i = ids.length;
while (i--) {
if (tableIds.indexOf(ids[i]) != -1) {
ids.splice(i, 1);
lists.splice(i, 1);
}
}
}
}
});
</script>總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用plupload自定義參數(shù)實(shí)現(xiàn)多文件上傳
這篇文章主要介紹了使用plupload自定義參數(shù)實(shí)現(xiàn)多文件上傳的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
JS中實(shí)現(xiàn)隱藏部分姓名或者電話號(hào)碼的代碼
最近做了小項(xiàng)目,項(xiàng)目需要只顯示用戶的姓名和手機(jī)號(hào)開頭跟結(jié)尾,其他部分用*號(hào)代替,下面小編給大家分享一段簡單的代碼,需要的朋友跟隨腳本之家小編一起看看吧2018-07-07
open 動(dòng)態(tài)修改img的onclick事件示例代碼
動(dòng)態(tài)修改img的onclick事件,使用open也可輕松做到,下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2013-11-11
JavaScript操作localStorage實(shí)現(xiàn)保存本地json文件
這篇文章主要為大家詳細(xì)介紹了JavaScript如何操作localStorage實(shí)現(xiàn)保存本地json文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
使用jscript實(shí)現(xiàn)二進(jìn)制讀寫腳本代碼
Reading And Writing Binary Files Using JScript正如我剛才推什么我能做的JScript中,我想出了對(duì)問題的二進(jìn)制文件。以下級(jí)的解決,這為小到中等大小的文件。我的部分包括這個(gè)職位在這里,因?yàn)槲壹磳⒏吨T表決,在一個(gè)職位約發(fā)送帶有附件的電郵通過JScript和它會(huì)使用這個(gè)二進(jìn)制文件碼來讀取,在二進(jìn)制附件檔案。2008-06-06

