Layui table.on('cell(...)') 失效是因为该事件仅监听带 edit 或 toolbar 的列，纯展示列不触发；须用 templet 渲染可点击元素并委托绑定事件，侧边栏需独立 DOM、visibility 控制显隐及手动适配高度。
不能直接用 table.on('cell(…) 绑定侧边栏展开，因为 layui 表格的 cell 事件默认不触发在非编辑态的普通单元格上；必须手动给目标列加 templet 渲染可点击元素，并控制侧边栏 dom 的显隐与数据填充。
为什么 table.on('cell(…) 失效？
Layui 的 table.on('cell(…) 仅对设置了 edit: 'text' 或 toolbar: true 的列生效；纯展示列（如 {field: 'name', title: '姓名'}）即使加了 event 属性也不会触发事件监听。这是底层事件委托机制决定的——它只监听带特定 class（如 layui-table-edit）的子元素。
- 常见错误现象：
console.log完全不执行，或只在双击编辑时触发 - 正确做法：放弃依赖原生 cell 事件，改用自定义模板 + 手动绑定
- 兼容性影响：Layui 2.7+ 到 2.8.10 均存在此限制，无版本修复
如何用 templet 渲染可点击单元格
在列配置中用 templet 返回带 data-id 和点击行为的 HTML，再用 jQuery 绑定事件。注意避免重复绑定（尤其翻页后）。
- 示例列配置：
{field: 'id', title: '操作', templet: '<div class="show-detail-btn" data-id="{{d.id}}">查看详情</div>'} - 绑定事件时需用事件委托，防止翻页后失效：
$(document).on('click', '.show-detail-btn', function() { ... }) - 不要在
templet中写内联onclick，否则无法传参或维护困难 - 若表格启用了
skin: 'row'，需额外加css防止按钮被遮挡：.show-detail-btn { cursor: pointer; color: #01aaed; }
侧边栏 DOM 如何控制显隐与数据填充
侧边栏不能嵌在表格容器内，必须作为独立 <div class="sidebar"> 放在 <body> 下层；用 visibility: hidden 而非 display: none，否则 layui.util.fixbar() 或滚动计算会出错。
- 初始化时设
style="visibility: hidden; width: 320px;"，并加position: fixed; right: 0; top: 0; height: 100vh; - 点击后用
$('.sidebar').css('visibility', 'visible')显示，并立即填入数据：$('.sidebar .content').html(...) - 原始数据建议从
table.cache['yourTableId']中按id查找，避免重新请求 - 关闭按钮要手动触发
$('.sidebar').css('visibility', 'hidden')，别用remove()否则丢失 DOM 结构
容易忽略的细节和边界问题
侧边栏高度、滚动、响应式这三块最容易翻车。Layui 不会自动适配 sidebar 内容高度变化，也不监听 visibility 变更。
- 每次填充内容后，必须手动调用
layui.util.fixbar({bar1: true})（如果用了悬浮按钮）或重设 sidebar 高度：$('.sidebar').height($(window).height()) - 移动端需加
@media (max-width: 768px) { .sidebar { width: 100%; right: auto; left: 0; } } - 若表格启用了
page: true，翻页后记得清空 sidebar 数据并隐藏，否则残留旧内容 - 多个表格共用同一侧边栏时，
data-id必须带表标识前缀，比如data-id="user-123"，避免冲突
