Layui数据表格如何实现渲染自定义的HTML内容（Templet用法）

templet函数必须返回HTML字符串，不可返回jQuery对象或DOM节点；正确写法是拼接完整字符串并转义用户内容防XSS，事件和组件初始化须在done回调中委托绑定与执行。

必须用 templet 函数返回 HTML 字符串，不能返回 jQuery 对象、DOM 节点或直接调用组件初始化方法；否则单元格空白、报错或渲染失效。

templet 函数必须返回字符串，不是 DOM 或 jQuery 对象

常见错误是写成 templet: function(d) { return layui.$('' + d.status + ''); }——这会导致单元格内容为空，因为 Layui 表格内部用 innerHTML 插入内容，只认字符串。

1. 正确写法：拼出完整 HTML 字符串，如 templet: function(d) { return '' + (d.status === 1 ? '启用' : '禁用') + ''; }
2. 外层用单引号，HTML 属性统一用双引号，避免引号嵌套冲突
3. 若字段值含双引号（如 d.name === 'Alice "Dev"'），必须用 layui.laytpl.escape(d.name) 转义，否则破坏 HTML 结构
4. 值为 null 或 undefined 时要兜底，比如 var name = d.name || ''，否则控制台报错、单元格留空

动态渲染不同结构，靠 if/else 写在 templet 函数里

想让“草稿行只显示编辑按钮，已发布行显示下架+禁用按钮”，不能靠 toolbar 或点击事件里判断——那是事后补救，DOM 已冗余且状态易错乱。

1. 必须在 templet 函数内用 if/else 或 switch 分支，根据 d.status、d.type 等字段返回不同 HTML
2. 示例：templet: function(d) { if(d.status === 'draft') { return '编辑'; } else if(d.status === 'published') { return '下架禁用'; } return '—'; }
3. 禁止在模板里发起请求、修改全局变量或调用 laytpl.render() 等副作用操作，它只负责“画出来”

需要初始化组件（如进度条、开关）？templet 只输出容器，done 回调里再调用

像 layui.progress()、layui.form().switch() 这类组件，不能在 templet 字符串里直接调用——此时 DOM 还没挂载，模块也未就绪。

1. templet 只负责输出带 data-* 属性的容器，例如：templet: function(d) { return '
   '; }
2. 所有初始化逻辑必须放在 table.render 的 done 回调里，用 layui.$('.layui-progress[data-percent]').each(...) 遍历并调用 layui.progress(elem[0], {...})
3. 注意传参：第一个参数必须是原生 DOM 元素（elem[0]），不是 jQuery 对象；data-percent 为 null 时要 fallback 到 0，否则 layui.progress 可能不渲染

事件绑定必须委托，不能写 onclick 或每行单独 bind

在 templet 里写 onclick="handleClick()" 看似简单，但分页、搜索、reload 后 DOM 重建，内联事件会丢失，也无法访问当前行数据 d。

1. 统一在 done 回调里用事件委托：layui.$(elem).on('click', 'td[data-field="status"] button', handler)
2. 通过 $(this).closest('tr').data('index') 拿到行索引，再查 table.cache[tableId][index] 获取原始数据
3. 避免给每个按钮单独 addEventListener，防止重复绑定和内存泄漏
4. 如果用了 layer.tips() 类浮层提示，也要在 done 里统一处理，并监听 mouseenter 和 touchstart 以兼容移动端

最易被忽略的是：所有依赖 DOM 存在的操作（组件初始化、事件绑定、tooltip、截断提示）都必须等 done 触发后执行；而 templet 本身只做纯字符串拼接，越轻量越稳。一旦混入 DOM 操作或异步逻辑，表格重绘时就会出问题。