快捷導(dǎo)航

Layui之table中的radio在切換分頁時無法記住選中狀態(tài)的解決方法

更新時間：2019年09月02日 16:14:53 作者：xcmercy

今天小編就為大家分享一篇Layui之table中的radio在切換分頁時無法記住選中狀態(tài)的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

情景描述

Layui數(shù)據(jù)表格中用到了表單元素radio，在當(dāng)前頁面選中radio狀態(tài)，并同步更新到保存表格中所有的數(shù)據(jù)的數(shù)組中（獲取表格中的所有數(shù)據(jù)并保存到數(shù)組中），再點擊分頁組件中的下一頁、上一頁、跳轉(zhuǎn)按鈕進行切換另外一個頁面，然后在切換回之前的頁面，會發(fā)現(xiàn)在以前頁面上radio狀態(tài)全部恢復(fù)默認了，我們當(dāng)然是希望能保存住前一頁radio的選中狀態(tài)。

我寫項目遇到的一個的情況：在第一頁選中的radio的狀態(tài)，點擊下一頁按鈕切換到第二頁，然后再點擊上一頁切換會第一頁，第一頁中的radio狀態(tài)就恢復(fù)默認了。

原因分析

點擊分頁組件中的小組件進行切換頁面時，渲染切換到的目標(biāo)頁面所使用的數(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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: