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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
浅析vue component 组件使用
Mar 06 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
div层的移动及性能优化
2010/11/16 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python callable()函数用法实例分析
2018/03/17 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
对python函数签名的方法详解
2019/01/22 Python
更新修改后的Python模块方法
2019/03/03 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
2014年父亲节活动方案
2014/03/06 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers