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 相关文章推荐
把input初始值不写value的具体实现方法
Jul 04 Javascript
js 窗口抖动示例
Sep 04 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 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中$this和$that指针使用实例
2015/01/06 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JS定时器实例
2013/04/17 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JS实现图片上传预览功能
2016/11/21 Javascript
bootstrap table实例详解
2017/01/06 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
详解django2中关于时间处理策略
2019/03/06 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
英国探险旅游专家:Explore
2018/12/20 全球购物
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python