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 21 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
微信小程序获取当前时间及星期几的实例代码
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 include的妙用,实现路径加密
2008/07/29 PHP
php 文本文件的读取效率
2012/02/10 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
php数组使用规则分析
2015/02/27 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
javascript中Function类型详解
2015/04/28 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
解析jQueryEasyUI的使用
2016/11/22 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python距离测量的方法
2018/03/06 Python
Python requests模块实例用法
2019/02/11 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
2014年班主任自我评价范文
2014/04/23 职场文书
党支部承诺书
2015/01/20 职场文书
募捐感谢信
2015/01/22 职场文书
出国留学自荐信模板
2015/03/06 职场文书
总经理年会致辞
2015/07/29 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js