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的观察者模式详解
Dec 22 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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/01/10 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
浅析PHP开发规范
2018/02/05 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
JS实现拼图游戏
2021/01/29 Javascript
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python3多线程操作简单示例
2018/05/22 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2014年实习期工作总结
2014/11/27 职场文书
爱心捐书倡议书
2015/04/27 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python
Java 死锁解决方案
2022/05/11 Java/Android