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 相关文章推荐
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
实例解析Array和String方法
Dec 14 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 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新手上路(四)
2006/10/09 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
vuex实现简易计数器
2016/10/27 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python操作CouchDB的方法
2014/10/08 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
详解Python 切片语法
2019/06/10 Python
python如何从文件读取数据及解析
2019/09/19 Python
python groupby 函数 as_index详解
2019/12/16 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
煤矿班组长岗位职责
2013/12/29 职场文书
给全校老师的建议书
2014/03/13 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
让生命充满爱观后感
2015/06/08 职场文书
市级三好生竞选稿
2015/11/21 职场文书
合作合同协议书
2016/03/21 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang