重载后高亮丢失因dom重建导致class清空,需用data-index在done回调中恢复layui-table-hover;若含radio列,应优先用setrowchecked管理选中状态。
重载后高亮状态丢失,是因为 table.reload() 会销毁并重建 dom,所有手动添加的 class(比如 layui-table-hover)或内联样式都会被清空。layui 本身不持久化“当前高亮行”这个状态,得你自己记、自己恢复。
用 data-index + done 回调还原高亮
每次点击行时,把当前行的 data-index 存到变量里;重载完成时,在 done 回调中重新给对应 tr[data-index="xxx"] 加上 layui-table-hover 类。
-
data-index是 Layui 渲染时自动加在每行tr上的属性,稳定可靠,比用data-id或索引更安全(分页/排序后索引会变) - 别在
reload()调用前手动删layui-table-hover—— 重载后 DOM 全新,删了也没用 -
done是唯一能确保表格 DOM 已就绪、且数据已渲染完成的时机,success回调不保证 DOM 就位
setRowChecked 配合 radio 列才是官方推荐路径
如果你的表格配置了 {type: 'radio', fixed: 'left'},那高亮状态本质就是“选中状态”,直接用 setRowChecked 管理最稳妥,Layui 会自动同步样式和内部状态。
- 重载前调用
table.checkStatus('your-filter').data拿到当前选中行数据,提取其id或其他唯一标识 - 重载时在
done回调里遍历新渲染的tr,找到匹配id的行,再调用obj.setRowChecked({type: 'radio'}) - 注意:必须确保重载后的数据里仍包含该
id,否则找不到目标行 —— 分页跳转或搜索过滤后可能已不在当前页
避免用内联 style 覆盖背景色
有人用 $(obj.tr).attr('style', 'background:#eee') 实现高亮,但重载后这些 style 属性全丢,且容易和 Layui 内部 hover、排序、工具栏等交互样式冲突。
- 优先复用 Layui 自带的
layui-table-hover类 —— 它是官方预留的语义化样式钩子,兼容性最好 - 如果必须自定义颜色,CSS 里写
.layui-table-hover { background-color: #f0f9ff !important; },别靠 JS 拼 style 字符串 - 不要在
row事件里反复removeClass('layui-table-hover')再addClass—— 重载后没意义,且影响性能
真正难的不是“怎么加高亮”,而是“怎么让高亮在 reload、分页、排序、搜索之后还对得上行”。核心就两条:用 data-index 或业务 id 做锚点,所有操作都围绕它做映射;所有 DOM 操作只在 done 里做一次,别提前、别重复。











