layui表格分頁(yè) 記錄勾選的實(shí)例
layui 分頁(yè)之后沒(méi)有記錄之前勾選項(xiàng)的功能 , 自己寫(xiě)了一個(gè) , 主要點(diǎn)就是表格的done 函數(shù) ,每次渲染完成之后做表格勾選操作。然后需要一個(gè)全局變量記錄所有已經(jīng)勾選的項(xiàng) 。下面是自己的代碼 。
首先,監(jiān)聽(tīng)表格的復(fù)選框點(diǎn)擊事件 , 將單選或全選全部記錄下來(lái)
var checkArray = new Array();
// 當(dāng)前頁(yè)數(shù)據(jù)
var currentArray ;
//監(jiān)聽(tīng)行單擊事件(單擊事件為:rowDouble)
table.on('checkbox(test)', function(obj){
var checkData = obj.data ;
// 如果是全選中
if(obj.type == 'all' && obj.checked == true){
var checkStatus = table.checkStatus('demo')
,data = checkStatus.data;
for(var i in data){
// 如果包含就去掉 ,不包含就添加
if(checkArray.indexOf(data[i].eventTypeName) > -1){
}else {
checkArray.push(data[i].eventTypeName) ;
}
}
}
// 全不選中
else if(obj.type == 'all' && obj.checked == false){
for(var i in currentArray){
checkArray.remove(currentArray[i].eventTypeName) ;
}
}
// 如果是單選
else {
var eventTypeName = checkData.eventTypeName ;
// 如果包含就去掉 ,不包含就添加
if(checkArray.indexOf(eventTypeName) > -1){
checkArray.remove(eventTypeName) ;
}else {
checkArray.push(eventTypeName) ;
}
}
});
然后 ,
done: function(res, curr, count){
//如果是異步請(qǐng)求數(shù)據(jù)方式,res即為你接口返回的信息。
//如果是直接賦值的方式,res即為:{data: [], count: 99} data為當(dāng)前頁(yè)數(shù)據(jù)、count為數(shù)據(jù)總長(zhǎng)度
currentArray = res.data ;
//.假設(shè)你的表格指定的 id="maintb",找到框架渲染的表格
var tbl = $('#demo').next('.layui-table-view');
// 渲染選擇框
for(var i in currentArray){
for(var j in checkArray){
if(currentArray[i].eventTypeName == checkArray[j]){
tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
}
}
}
form.render('checkbox');
}
以上這篇layui表格分頁(yè) 記錄勾選的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- php+layui數(shù)據(jù)表格實(shí)現(xiàn)數(shù)據(jù)分頁(yè)渲染代碼
- thinkphp5+layui實(shí)現(xiàn)的分頁(yè)樣式示例
- layui+jquery支持IE8的表格分頁(yè)方法
- layui 數(shù)據(jù)表格+分頁(yè)+搜索+checkbox+緩存選中項(xiàng)數(shù)據(jù)的方法
- layui table 獲取分頁(yè) limit的方法
- 淺談layui分頁(yè)控件field參數(shù)接收對(duì)象的問(wèn)題
- 淺談layui框架自帶分頁(yè)和表格重載的接口解析問(wèn)題
- Layui之table中的radio在切換分頁(yè)時(shí)無(wú)法記住選中狀態(tài)的解決方法
- Layui實(shí)現(xiàn)數(shù)據(jù)表格默認(rèn)全部顯示(不要分頁(yè))
相關(guān)文章
echarts交互組件與數(shù)據(jù)的視覺(jué)映射
這篇文章介紹了echarts交互組件與數(shù)據(jù)的視覺(jué)映射,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06
JS實(shí)現(xiàn)彈出下載對(duì)話框及常見(jiàn)文件類(lèi)型的下載
JS要實(shí)現(xiàn)下載功能,一般都是這么幾個(gè)過(guò)程:生成下載的URL,動(dòng)態(tài)創(chuàng)建一個(gè)A標(biāo)簽,并將其href指向生成的URL,然后觸發(fā)A標(biāo)簽的單擊事件,這樣就會(huì)彈出下載對(duì)話框,從而實(shí)現(xiàn)了一個(gè)下載的功能2017-07-07
Postman自動(dòng)化接口測(cè)試實(shí)戰(zhàn)
有時(shí)我們可能需要在多個(gè)環(huán)境下對(duì)同一個(gè)接口進(jìn)行測(cè)試。比如我們請(qǐng)求的域名,開(kāi)發(fā)、測(cè)試、生產(chǎn)環(huán)境,請(qǐng)求參數(shù)。文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
Bootstrap Scrollspy源碼學(xué)習(xí)
這篇文章主要介紹了Bootstrap Scrollspy源碼學(xué)習(xí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
基于JS實(shí)現(xiàn)翻書(shū)效果的頁(yè)面切換樣式
在項(xiàng)目開(kāi)發(fā)中經(jīng)常遇到翻書(shū)的頁(yè)面切換效果,基于js代碼怎么實(shí)現(xiàn)的呢?今天小編給大家分享基于JS實(shí)現(xiàn)翻書(shū)效果的頁(yè)面切換樣式,需要的朋友參考下吧2017-02-02

