情景描述
Layui数据表格中用到了表单元素radio，在当前页面选中radio状态，并同步更新到保存表格中所有的数据的数组中（获取表格中的所有数据并保存到数组中），再点击分页组件中的下一页、上一页、跳转按钮进行切换另外一个页面，然后在切换回之前的页面，会发现在以前页面上radio状态全部恢复默认了，我们当然是希望能保存住前一页radio的选中状态。
我写项目遇到的一个的情况：在第一页选中的radio的状态，点击下一页按钮切换到第二页，然后再点击上一页切换会第一页，第一页中的radio状态就恢复默认了。
原因分析
点击分页组件中的小组件进行切换页面时，渲染切换到的目标页面所使用的数据并不是更新后的tableContent中的数据，而是使用的table模块缓存中的数据，而我们只更新完tableContent中的数据时它并不会同步更新table模块缓存中的数据，所以导致了切换页面的时候无法记住radio的状态。
解决办法
弄清楚问题原因解决起来就很简单了，只需要再点击radio的时候，同步更新tableContent中的数据和table模块缓存中的数据就可以了（数据是放在table的cache属性中的，如下图）。
数据表格
table中的数据
代码
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在切换分页时无法记住选中状态的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。