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 相关文章推荐
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
javascript字符串函数汇总
Dec 06 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
封装 axios+promise通用请求函数操作
Aug 11 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
BBS(php & mysql)完整版(八)
2006/10/09 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
js转html实体的方法
2016/09/27 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
城市轨道专业个人求职信范文
2013/09/23 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
校庆筹备方案
2014/03/30 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
给老婆的保证书
2015/01/16 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang