layui監(jiān)聽復選框checkbox選中以及分頁選中處理方式
更新時間:2025年04月01日 15:42:51 作者:hexu_blog
這篇文章主要介紹了layui監(jiān)聽復選框checkbox選中以及分頁選中處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
layui監(jiān)聽復選框checkbox選中及分頁選中處理
具體實現(xiàn)代碼如下:
需要關注三個位置
- done表格加載完畢方法
- cols中復選框欄定義
- table.on中對復選框選中或取消的狀態(tài)定義
這三個地方的代碼直接復制去用就行了
最終選中的數(shù)據(jù)id為:ids
<script> layui.use(['table', 'form', 'upload','laydate'], function () { // 設置全局變量以保存選中行信息(僅需要id的話在你的業(yè)務位置調(diào)用ids即可,數(shù)據(jù)格式是int數(shù)組) let ids = new Array(); // 存儲所有選中的數(shù)據(jù)(需要行內(nèi)全量數(shù)據(jù)在你的業(yè)務位置調(diào)用lists即可,數(shù)據(jù)格式是對象集合) var lists = new Array(); // 保存當前頁全部數(shù)據(jù)id,點擊全選時使用 let tableIds = new Array(); //第一個實例 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ù)據(jù)id到全局變量 tableIds = res.data.map(function (value) { return value.id; }); // 設置當前頁選中項 $.each(res.data, function (idx, val) { if (ids.indexOf(val.id) > -1) { val["LAY_CHECKED"] = 'true'; //找到對應數(shù)據(jù)改變勾選樣式,呈現(xiàn)出選中效果 let index = val['LAY_TABLE_INDEX']; $('tr[data-index=' + index + '] input[type="checkbox"]').click(); form.render('checkbox'); //刷新checkbox選擇框渲染 } }); // 獲取表格勾選狀態(tài),全選中時設置全選框選中 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ù)編號', sort: true, hide: true } , { field: 'id', sort: true, type: 'checkbox' }//在此聲明表格復選框 , { field: 'DataNumber', align: 'center', title: '序號', width: 60, type: 'numbers' } , { field: 'shiptitle', align: 'center', title: '船名' } , { field: 'carrierstitle', align: 'center', title: '承運商' } , { field: 'startPortName', align: 'center', title: '始發(fā)港' } , { field: 'destPortName', align: 'center', title: '到港' } , { field: 'arrivalTime', align: 'center', title: '運達時間' } , { 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: '實際索賠金額' } , { field: 'claimcompensationInfostateName', align: 'center', title: '索賠狀態(tài)' } , { field: 'auditremark', align: 'center', title: '審核備注', hide: true } ]] }); //使用on監(jiān)聽checkbox選中狀態(tài)并進行處理(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++) { //當全選之前選中了部分行進行判斷,避免重復 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>
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
webpack DllPlugin xxx is not defined解決辦法
這篇文章主要介紹了webpack DllPlugin xxx is not defined解決辦法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-12-12javascript getElementsByClassName 和js取地址欄參數(shù)
為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個),我們先來實現(xiàn)一個通過className找DOM節(jié)點的方法:getElementsByClassName。這是對瀏覽器自有DOM方法的一個簡單但實用的擴充。2010-01-01