Layui之table中的radio在切换分页时无法记住选中状态的解决方法


Posted in Javascript onSeptember 02, 2019

情景描述

Layui数据表格中用到了表单元素radio,在当前页面选中radio状态,并同步更新到保存表格中所有的数据的数组中(获取表格中的所有数据并保存到数组中),再点击分页组件中的下一页、上一页、跳转按钮进行切换另外一个页面,然后在切换回之前的页面,会发现在以前页面上radio状态全部恢复默认了,我们当然是希望能保存住前一页radio的选中状态。

我写项目遇到的一个的情况:在第一页选中的radio的状态,点击下一页按钮切换到第二页,然后再点击上一页切换会第一页,第一页中的radio状态就恢复默认了。

原因分析

点击分页组件中的小组件进行切换页面时,渲染切换到的目标页面所使用的数据并不是更新后的tableContent中的数据,而是使用的table模块缓存中的数据,而我们只更新完tableContent中的数据时它并不会同步更新table模块缓存中的数据,所以导致了切换页面的时候无法记住radio的状态。

解决办法

弄清楚问题原因解决起来就很简单了,只需要再点击radio的时候,同步更新tableContent中的数据和table模块缓存中的数据就可以了(数据是放在table的cache属性中的,如下图)。

数据表格

Layui之table中的radio在切换分页时无法记住选中状态的解决方法

table中的数据

Layui之table中的radio在切换分页时无法记住选中状态的解决方法

代码

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;

 // 存储数据表格中的原始数据也就是索引键信息
 var tableContent = new Array();

 // 监听数据表格中的radio,更新原始数据数据中的radio状态,同时更新数据表格的缓存
 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);

 // 将选择的排序方式更新到原始数据数组中
 $.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在切换分页时无法记住选中状态的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
axios封装与传参示例详解
Oct 18 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
使用JS实现简易计算器
Jun 14 Javascript
layui表格分页 记录勾选的实例
Sep 02 #Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 #Javascript
layui复选框的全选与取消实现方法
Sep 02 #Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 #Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 #Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 #Javascript
微信小程序 简易计算器实现代码实例
Sep 02 #Javascript
You might like
PHP基础知识回顾
2012/08/16 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python如何判断数独是否合法
2016/09/08 Python
用Python shell简化开发
2018/08/08 Python
Python实现网站表单提交和模板
2019/01/15 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
班队活动设计方案
2014/01/30 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
开天辟地观后感
2015/06/09 职场文书
民事调解协议书
2016/03/21 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP