Layui之table中的radio在切換分頁時無法記住選中狀態(tài)的解決方法
情景描述
Layui數(shù)據(jù)表格中用到了表單元素radio,在當前頁面選中radio狀態(tài),并同步更新到保存表格中所有的數(shù)據(jù)的數(shù)組中(獲取表格中的所有數(shù)據(jù)并保存到數(shù)組中),再點擊分頁組件中的下一頁、上一頁、跳轉(zhuǎn)按鈕進行切換另外一個頁面,然后在切換回之前的頁面,會發(fā)現(xiàn)在以前頁面上radio狀態(tài)全部恢復(fù)默認了,我們當然是希望能保存住前一頁radio的選中狀態(tài)。
我寫項目遇到的一個的情況:在第一頁選中的radio的狀態(tài),點擊下一頁按鈕切換到第二頁,然后再點擊上一頁切換會第一頁,第一頁中的radio狀態(tài)就恢復(fù)默認了。
原因分析
點擊分頁組件中的小組件進行切換頁面時,渲染切換到的目標頁面所使用的數(shù)據(jù)并不是更新后的tableContent中的數(shù)據(jù),而是使用的table模塊緩存中的數(shù)據(jù),而我們只更新完tableContent中的數(shù)據(jù)時它并不會同步更新table模塊緩存中的數(shù)據(jù),所以導(dǎo)致了切換頁面的時候無法記住radio的狀態(tài)。
解決辦法
弄清楚問題原因解決起來就很簡單了,只需要再點擊radio的時候,同步更新tableContent中的數(shù)據(jù)和table模塊緩存中的數(shù)據(jù)就可以了(數(shù)據(jù)是放在table的cache屬性中的,如下圖)。
數(shù)據(jù)表格

table中的數(shù)據(jù)

代碼
layui.use(['form','layer','element','table','laypage'],function(){
var form = layui.form;
var layer = layui.layer;
var element = layui.element;
var table = layui.table;
var laypage = layui.laypage;
// 存儲數(shù)據(jù)表格中的原始數(shù)據(jù)也就是索引鍵信息
var tableContent = new Array();
// 監(jiān)聽數(shù)據(jù)表格中的radio,更新原始數(shù)據(jù)數(shù)據(jù)中的radio狀態(tài),同時更新數(shù)據(jù)表格的緩存
form.on('radio(sortRadio)',function(data){
console.log(data);
console.log(data.elem); //得到radio原始DOM對象
console.log(data.value); //被點擊的radio的value值
var radioValue = data.value;
// 獲取customId
var radioName = $(data.elem).attr('name');
var tempArr = radioName.split('-');
var customId = parseInt(tempArr[1]);
console.table(tableContent);
// 將選擇的排序方式更新到原始數(shù)據(jù)數(shù)組中
$.each(tableContent,function(index,data){
if (data.customId === customId) {
data.indexOrder = radioValue;
}
});
console.log(table);
console.table(tableContent);
// 更新緩存中的排序方式
var cacheData = table.cache.indexKeyTable;
$.each(cacheData,function(index,data){
if (data.customId === customId) {
data.indexOrder = radioValue;
}
});
console.table(table.cache.indexKeyTable);
});
})
以上這篇Layui之table中的radio在切換分頁時無法記住選中狀態(tài)的解決方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序wx.uploadfile 本地文件轉(zhuǎn)base64的實現(xiàn)代碼
這篇文章主要介紹了微信小程序wx.uploadfile 本地文件轉(zhuǎn)base64的實現(xiàn)方法,文中通過代碼講解給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
利用HTML與JavaScript實現(xiàn)注冊頁面源碼
這篇文章主要給大家介紹了關(guān)于利用HTML與JavaScript實現(xiàn)注冊頁面的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家實現(xiàn)注冊頁面具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
javascript數(shù)組使用調(diào)用方法匯總
javascript數(shù)組使用調(diào)用方法匯總...2007-12-12
Javascript快速實現(xiàn)瀏覽器系統(tǒng)通知
這篇文章給大家介紹了Javascript快速實現(xiàn)瀏覽器系統(tǒng)通知的方法,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-08-08

