Layui表格行事件须用table.on('row(表名)')绑定，原生click失效；时间轴弹窗用type:1+content，offset设['20px','right']贴右显示；轮询需在success中启动、cancel中清除。
表格行点击事件绑定必须用 table.on('row')，不能用 click 原生监听
直接给 <tr> 绑原生 <code>click 会失效，因为 layui 表格是动态渲染的，dom 节点在分页、重载后会被替换。layui 提供了语义化事件钩子：table.on('row(表名)')，它能自动代理到所有当前及后续渲染的行。
常见错误是写成 $('tbody tr').on('click', ...) 或在 render 后立即查 DOM 绑定——这些在翻页或搜索后全部失效。
正确做法是在 table.render() 之后，用 table.on 订阅事件：
table.on('row(orderTable)', function(obj){
var data = obj.data; // 当前行数据
showStatusTimeline(data.id);
});
layer.open 中嵌套时间轴需用页面层（type:1），不是 iframe 层
状态流水详情本质是动态生成的 DOM 结构（如物流节点、操作记录、时间戳），不适合用 type:2 加载外部页面。用 type:1 + content 字符串或 jQuery 对象更可控，也便于传参和更新。
注意两点：一是避免把整个时间轴 HTML 写死在 content 字符串里（难维护）；二是别漏掉 shadeClose: false，否则用户点遮罩就关掉了弹窗，无法滚动查看长流水。
推荐结构：
- 用
<div id="timeline-container"></div>作为容器 - 在
success回调里调用renderTimeline(data.id, $('#timeline-container')) - 流水数据通过 AJAX 获取，返回格式建议含
steps: [{time, operator, status, remark}]
右侧固定弹窗宽度和位置靠 offset 和 area 配合，不是 CSS 定位
Layui 弹窗不响应外部 CSS 的 position: absolute 或 right: 0。要实现“贴右显示”，必须用 offset 配置项指定坐标，例如 offset: ['20px', 'right'] 表示距顶部 20px、紧贴右侧边缘。
area 推荐设为像素值而非百分比，比如 ['420px', '600px']，避免在小屏下撑满全屏。若内容高度不确定，可设 maxHeight: '70vh' 并让内部滚动，而不是放任弹窗无限拉高。
容易踩的坑：
-
offset: 'r'是无效写法，必须是数组形式['top', 'right'] - 没设
fixed: true（默认为 true，但显式声明更稳妥），滚动页面时弹窗会错位 - 多个弹窗同时打开时，z-index 可能重叠，可加
zIndex: 20000 + Math.random()微调
实时刷新状态流水的关键是弹窗内手动轮询，layer 不自带自动重载
订单状态可能在弹窗打开后继续变更（如发货中 → 已发货），但 layer.open 本身不会监听或重绘。必须在弹窗内容区主动发起轮询。
不要在全局 setInterval，而应在弹窗 success 回调中启动，并在 cancel 或 end 回调里清除定时器，否则关闭弹窗后请求还在发。
示例节选：
var pollTimer;
layer.open({
type: 1,
offset: ['20px', 'right'],
area: ['420px', '600px'],
content: '<div id="timeline-box"></div>',
success: function(layero, index){
renderTimeline(orderId, $('#timeline-box'));
pollTimer = setInterval(() => {
loadLatestSteps(orderId).then(steps => {
updateTimeline(steps, $('#timeline-box'));
});
}, 8000);
},
cancel: function(index, layero){
clearInterval(pollTimer);
}
});
真正容易被忽略的是：轮询接口必须返回完整状态序列（不是增量），否则前端 diff 复杂且易出错；另外，首次加载和轮询应共用同一份渲染逻辑，避免两套模板导致样式或行为不一致。
