Layui表格怎么实现完整的增删改查前端交互流程

表格初始化必须用 table.render 而非 table.init，需显式传入 url 和 page；cols 按钮须用 lay-event 绑定；form 提交前须手动校验；编辑数据应修改 table.cache 后 reload；删除须二次确认并收集全量选中 ID。

表格初始化时必须用 render 而非直接 init

很多人在首次加载表格时直接调用 table.init，结果数据不渲染、工具栏按钮失效——这是因 layui 2.8+ 已废弃该方法，table.render 才是唯一正确入口。它会自动绑定分页、排序、事件监听等基础能力。

关键点：必须显式传入 url（接口地址）和 page（开启分页），否则即使后端返回了数据，前端也只显示 loading 状态。

• url 必须是真实可访问的接口，且返回格式严格符合 {code: 0, count: N, data: [...]}
• 若用 mock 数据，需手动包装成该结构，不能直接返回数组
• cols 中每个字段的 templet 若含按钮，必须用 lay-event 属性绑定事件名，如 lay-event="edit"

新增弹窗里表单提交前要手动校验 form.verify

Layui 的 form.on('submit(...)') 不会自动拦截空值或格式错误，提交后才触发后端校验，用户体验差。必须在点击「确定」前主动调用 form.verify 并检查返回值。

常见坑：form.verify 的回调函数里不能用 return false 中断流程，而应通过 layer.msg 提示 + return 提前退出函数体。

• 定义规则时，key 名需与 input name 完全一致，大小写敏感
• 异步校验（如用户名是否已存在）要用 ajax + done 回调，不能直接 return
• 弹窗表单建议用 form.render('select') 补充渲染下拉框，否则 form.val 取不到值

编辑行数据时别直接改 data 数组，要用 table.cache + table.reload

直接修改 table.cache['id'] 中某项再调用 table.reload 是最稳妥的更新方式。有人尝试用 layui.jquery(...).text() 直接改 DOM，结果排序/分页后内容丢失，因为 Layui 表格的数据源只认 cache 和接口响应。

立即学习“前端免费学习笔记（深入）”；

注意：如果启用了 height 或 limit，reload 时必须把原参数一并传入，否则分页器重置、高度失效。

• 获取当前行数据用 obj.tr.data('index') 拿到索引，再查 table.cache['id'][index]
• 更新后 reload 需带 where 参数同步搜索条件，否则翻页后搜不到刚改的记录
• 避免在 tool 事件里嵌套 layer.open 后立刻 reload，应等用户关闭弹窗再执行

删除操作必须加二次确认且禁用批量删的默认行为

默认的 table.checkStatus 返回的是当前页选中项，不是全量数据选中状态。如果用户翻页后勾选多页，直接删会漏数据。更危险的是，没加 layer.confirm 就发请求，误点即丢数据。

真正安全的做法是：每次删都走单条 ID 请求；批量删则先收集所有页的选中 ID（需自己维护一个全局数组），再统一提交。

• 单删按钮的 lay-event 值要和 tool 监听事件里的字符串完全一致
• 删除成功后，用 obj.del() 删除当前行 DOM，比 reload 更快更稳
• 不要依赖 data.length 判断是否为空，Layui 分页下 data 永远是当前页数据，应查 count

实际交互链路跑通的关键，往往卡在「reload 时漏传 page 参数」或「form.verify 规则名和 input name 对不上」这种细节。接口返回字段名和前端 field 不一致、时间戳没转格式、弹窗里 form.on 绑定时机不对——这些问题不会报错，但交互就卡住不动。