Layui数据表格实现列点击直接修改数值

在开发 Layui 数据表格时，若希望单元格支持点击修改，仅绑定 click 或 dblclick 事件无法实现编辑功能。真正起效的是列配置中的 edit 字段——该字段启用后，Layui 会在对应单元格中渲染输入控件，从而实现直接编辑。

edit 字段的值决定了输入框的类型，常见取值如下：

• edit: 'text'：普通文本输入，适用于大部分常规编辑场景。
• edit: 'number'：带数字校验和上下箭头按钮，适合价格、数量等数值型字段。
• edit: 'select'：仅生成一个空的 标签，选项需手动添加。注意 table.on('edit') 事件对该类型无效，需单独处理。

特别提醒：edit: 'textarea' 并非 Layui 支持的值，设置后不会报错但会静默失效。如需多行文本编辑，需通过 templet 返回一个带有 class="layui-textarea" 的 元素，无其他捷径。

edit 与 templet 不可同时使用

当某列已配置 templet（例如用于添加图标、按钮或自定义格式显示）时，edit 会被 Layui 自动忽略。原理在于：templet 将渲染控制权交给开发者，编辑逻辑不再接管。

• 如果仅需实现数值右对齐或添加单位等简单样式，无需使用 templet。直接通过 CSS 即可：td[data-field="price"] { text-align: right; }，简洁高效。
• 若确实需要同时使用模板与编辑功能，可在 templet 中手动插入 或 ，随后调用 form.render()，并自行监听失焦或回车事件，手动更新 table.cache。该方法操作成本较高，非必要不建议采用。

移动端推荐使用单击进入编辑，配置 event: 'click'

Layui 默认双击进入编辑状态，但在移动设备上容易出现问题。iOS Safari 和多数安卓 WebView 会将双击识别为缩放或文字选择，用户多次点击仍无法进入输入框，体验较差。

• 解决方案：在列配置中添加 event: 'click'，例如 { field: 'price', title: '价格', edit: 'number', event: 'click' }。
• 若需区分 PC 端与移动端，可使用 layui.device() 判断设备类型后动态设置列配置。
• 同时，页面必须添加正确的 ，否则 click 事件存在 300ms 延迟，导致点击无响应。

编辑后的数据不在原始 data 中，需从 table.cache 获取

编辑操作仅修改 DOM 和临时缓存，最初传入的 data 数组内容不会改变。一旦翻页或重载表格，修改的值将丢失——这是常见易错点。

• 最新值存储在 table.cache['你的过滤ID'] 中，该 key 对应 table.render() 时设置的 id 或元素上的 lay-id。
• 安全写法示例：table.cache['priceTable'][rowIndex].price = newValue，需将 rowIndex 替换为实际行索引。
• 若使用服务端分页，则必须在 table.on('edit(filter)', callback) 回调中主动发起请求保存数据，Layui 不会自动同步到后台。

需注意的细节：编辑完成后，input 的 focus 状态可能未清除，或未正确处理回车/失焦时的校验，导致用户以为已修改成功，实际数据并未提交。建议在回调中手动触发验证或失焦处理，确保数据可靠落库。