场景描述

在Layui数据表中使用了form元素radio，在当前页面选择radio状态，同步更新到数组中保存表中所有数据(获取表中所有数据保存到数组中)。然后点击分页组件中的下一页、上一页和跳转按钮切换到另一页，再切换回上一页，你会发现上一页的所有单选状态都恢复到了默认。当然，我们希望保持上一页的选中电台状态。

写项目的时候遇到一种情况：在第一页选择的单选状态中，点击下一步按钮切换到第二页，再点击上一页切换到第一页，第一页的单选状态会恢复默认。

原因分析

当单击分页组件中的小部件来切换页面时，用于呈现切换后的目标页面的数据不是更新后的tableContent中的数据，而是表模块缓存中的数据。但是当我们只更新tableContent中的数据时，它不会同步更新table模块缓存中的数据，导致切换页面时无法记住radio的状态。

解决办法

找出问题的原因并解决它非常简单。再次点击单选，可以同步更新tableContent中的数据和table模块缓存中的数据(数据放在table的缓存属性中，如下图)。

资料记录表

表中的数据

密码

layui.use(['form '，' layer '，' element '，' table '，' laypage']，function(){ var form=layui . form；var layer=layui.layervar元素=layui.elementvar table=layui.tablevar lay page=layui . lay page；//将原始数据存储在数据表中，即索引键信息var tableContent=new Array()；//监控数据表中的电台，更新原始数据中的电台状态，更新缓存表单. on ('radio (sort radio)'，function(data){ console . log(data)；console . log(data . elem)；//获取radio的原始DOM对象console . log(data . value)；//被单击的radio var的值radioValue=data.value//获取自定义id varradio name=$ (data.elem)。attr(' name ')；var tempArr=radio name . split('-')；var customId=parsent(TempArr[1])；console . table(TableContent)；//将选定的排序方法更新为原始数据数组$。每个(表内容、函数(索引、数据){ if(data . custom id==custom id){ data . index order=radio value；} });console.log(表)；console . table(TableContent)；//更新缓存中的排序方式：var cache data=table . cache . indexkeytable；$.每个(cacheData，函数(索引，数据){ if(data . customId===customId){ data . indexorder=radio value；} });console . table(table . cache . indexkeytable)；});})解决了Layui表格中的电台在切换寻呼时无法记住选中状态的问题，这是边肖与大家分享的全部内容。希望能给大家一个参考，多支持我们。