监听单元格点击必须用 table.on('cell(表名)') 获取 row 数据，置顶需修改 data 数组并 reloadData()，同时手动保存滚动、选中、高亮状态，fixed 和 totalRow 需额外处理。

监听单元格点击获取目标行数据

必须用 table.on('cell(表名)')，不能给 直接绑 click 事件。后者在分页、排序、reload 后失效，且拿不到原始 row 对象；而 cell 事件回调里提供的 obj.row 是当前行完整数据，稳定可靠。

常见错误现象：点击后无反应，或 reload 后置顶消失——大概率是用了原生 click 绑定，没走 Layui 生命周期事件系统。

• 表名（即 id 参数）必须和 table.render() 时传入的一致，否则事件不触发
• 回调中不要操作 DOM 行元素（如 $(obj.tr).prependTo(...)），这会破坏 Layui 内部索引和固定列结构
• 若需支持多条件触发（比如只对某列生效），用 obj.field === 'xxx' 判断字段名

把目标行移到 data 数组开头并重载表格

置顶的本质是数据重排，不是视觉挪动。Layui 表格完全由传入的 data 数组驱动，DOM 只是渲染结果。所以得先从原始数据源中找到该行，把它 unshift() 到数组最前面，再调用 table.reloadData()。

容易踩的坑：直接改 res.data（服务端分页时的当前页数据）会导致翻页后置顶丢失；正确做法是维护一份全局可读写的 tableData 数组，并始终基于它操作。

• 如果用的是本地数据（data: [...] ），直接修改该数组并 table.reloadData()
• 如果用的是服务端分页（url），需在 done 回调中缓存全量数据到 table.cache['表名']，后续操作都基于这个 cache
• 移动前先用 findIndex 定位原位置，避免重复添加同一行（尤其在多次点击同一行时）

重载后手动恢复滚动和选中状态

table.reloadData() 会重建整个 ，导致页面 scrollTop 归零、已勾选行丢失、高亮行消失。这些状态不会自动保留，必须自己存、自己设。

性能影响：频繁置顶 + reload 会触发完整重绘，若数据量大（>500 行），建议加防抖或限制每秒最多一次操作。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• 滚动位置：在 reload 前记录 $('.layui-table-body').scrollTop()，reload 后用 setTimeout(() => {...}, 0) 恢复（因 DOM 尚未就绪）
• 选中状态：用 Set 存 row.id，重载后调用 table.checkRow('表名', id) 或手动更新 checkbox 状态
• 高亮行：同理，存 activeId，done 回调里主动给对应 tr 加 layui-table-hover 类（注意固定列要单独处理）

固定列和合计行场景下的兼容处理

当表格启用了 fixed: 'left' 或配置了 totalRow: true，单纯重排 data 并 reload 仍可能出问题：固定列 DOM 和主表不同步，合计行仍按旧顺序计算。

真正麻烦的不是代码量，而是 Layui 内部对固定列和合计行的 DOM 插入逻辑是隔离的。你改了主表 data，但 fixed 区域不会自动对齐，totalRow 也不会重新求和。

• 固定列：禁用 fixed 是最稳方案；若必须启用，reload 后需额外调用 table.resize() 强制同步宽度和位置
• 合计行：若用的是原生 totalRow: true，它只响应 data 变更，reload 后会自动更新；但若自定义顶部统计栏（beforeRender 实现），必须在重排 data 后手动重算所有列值并更新 HTML
• 动态列（权限控制 show/hide）：重排前先过滤掉隐藏列对应的数据字段，否则 templet 中取值可能报 undefined

事情说清了就结束。关键点始终是：操作数据，不是 DOM；存状态，不是靠框架记；兼容 fixed 和 totalRow 不是加几行代码的事，是理解它们各自独立的渲染路径。