首页 > 网页制作 >Layui数据表格实现列点击直接修改数值

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

来源：互联网 2026-07-05 09:50:07

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

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

长期稳定更新的攒劲资源： >>>点此立即查看<<<

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

edit: 'text'：普通文本输入，适用于大部分常规编辑场景。
edit: 'number'：带数字校验和上下箭头按钮，适合价格、数量等数值型字段。
edit: 'select'：仅生成一个空的 </code> 元素，无其他捷径。</p> <h3><code>edit</code> 与 <code>templet</code> 不可同时使用</h3> <p>当某列已配置 <code>templet</code>（例如用于添加图标、按钮或自定义格式显示）时，<code>edit</code> 会被 Layui 自动忽略。原理在于：<code>templet</code> 将渲染控制权交给开发者，编辑逻辑不再接管。</p> <ul> <li>如果仅需实现数值右对齐或添加单位等简单样式，无需使用 <code>templet</code>。直接通过 CSS 即可：<code>td[data-field="price"] { text-align: right; }</code>，简洁高效。</li> <li>若确实需要同时使用模板与编辑功能，可在 <code>templet</code> 中手动插入 <code><input></code> 或 <code><select></code>，随后调用 <code>form.render()</code>，并自行监听失焦或回车事件，手动更新 <code>table.cache</code>。该方法操作成本较高，非必要不建议采用。</li> </ul> <h3>移动端推荐使用单击进入编辑，配置 <code>event: 'click'</code></h3> <p>Layui 默认双击进入编辑状态，但在移动设备上容易出现问题。iOS Safari 和多数安卓 WebView 会将双击识别为缩放或文字选择，用户多次点击仍无法进入输入框，体验较差。</p> <ul> <li>解决方案：在列配置中添加 <code>event: 'click'</code>，例如 <code>{ field: 'price', title: '价格', edit: 'number', event: 'click' }</code>。</li> <li>若需区分 PC 端与移动端，可使用 <code>layui.device()</code> 判断设备类型后动态设置列配置。</li> <li>同时，页面必须添加正确的 <code><meta name="viewport"></code>，否则 <code>click</code> 事件存在 300ms 延迟，导致点击无响应。</li> </ul> <h3>编辑后的数据不在原始 <code>data</code> 中，需从 <code>table.cache</code> 获取</h3> <p>编辑操作仅修改 DOM 和临时缓存，最初传入的 <code>data</code> 数组内容不会改变。一旦翻页或重载表格，修改的值将丢失——这是常见易错点。</p> <ul> <li>最新值存储在 <code>table.cache['你的过滤ID']</code> 中，该 key 对应 <code>table.render()</code> 时设置的 <code>id</code> 或元素上的 <code>lay-id</code>。</li> <li>安全写法示例：<code>table.cache['priceTable'][rowIndex].price = newValue</code>，需将 <code>rowIndex</code> 替换为实际行索引。</li> <li>若使用服务端分页，则必须在 <code>table.on('edit(filter)', callback)</code> 回调中主动发起请求保存数据，Layui 不会自动同步到后台。</li> </ul> <p>需注意的细节：编辑完成后，input 的 focus 状态可能未清除，或未正确处理回车/失焦时的校验，导致用户以为已修改成功，实际数据并未提交。建议在回调中手动触发验证或失焦处理，确保数据可靠落库。</p> </div> <div class="mnxDqzcMsg"> <b></b> <p>侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述</p> <div class="clear"></div> </div> </div>   <div class="mnxDqzcBox"> <div class="mnxPhbTitle"> <b></b> <h2>相关攻略</h2> <em><a href="/newslist/918_1.html" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <div class="mnxZxtjBox"> <ul class="mnxZxglList"> <li> <a href="/article/669524/" title="手机wps怎么转换成word文档" class="aBlack">手机wps怎么转换成word文档</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/669523/" title="图片怎么生成链接" class="aBlack">图片怎么生成链接</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/669519/" title="小翼管家摄像头怎么重新配置网络连接" class="aBlack">小翼管家摄像头怎么重新配置网络连接</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/669512/" title="网购怎么退货" class="aBlack">网购怎么退货</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/669488/" title="追觅科技正式成为无边界生态企业将在AWE展会上亮相" class="aBlack">追觅科技正式成为无边界生态企业将在AWE展会上亮相</a> <span></span> <div class="clear"></div> </li> <li> <a href="/article/669476/" title="网盘怎么切换账号" class="aBlack">网盘怎么切换账号</a> <span></span> <div class="clear"></div> </li> </ul> </div> </div> <div class="mnxDqzcBox"> <div class="mnxPhbTitle"> <b></b> <h2>同类更新</h2> <em><a href="/newslist/918_1.html" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="mnxSplbList"> <li> <span> <a href="/article/991293/" title="奇遇西行项羽虞姬灼烧流阵容攻略"><img src="https://img.xiayx.com/uploadfile/news/202607296a69dc5ec4da9..jpg" alt="奇遇西行项羽虞姬灼烧流阵容攻略" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/991293/" title="奇遇西行项羽虞姬灼烧流阵容攻略" class="aBlack">奇遇西行项羽虞姬灼烧流阵容攻略</a></dt> </dl> </li> <li> <span> <a href="/article/991292/" title="最强祖师叶凡邀战反射流攻略"><img src="https://img.xiayx.com/uploadfile/news/202607296a69dc4f2fa62..jpg" alt="最强祖师叶凡邀战反射流攻略" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/991292/" title="最强祖师叶凡邀战反射流攻略" class="aBlack">最强祖师叶凡邀战反射流攻略</a></dt> </dl> </li> <li> <span> <a href="/article/991241/" title="SK海力士阻击长鑫优先供应中国手机厂商LPDDR6 小米首发"><img src="https://img.xiayx.com/uploadfile/news/202607296a69d7cf31ba9..jpg" alt="SK海力士阻击长鑫优先供应中国手机厂商LPDDR6 小米首发" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/991241/" title="SK海力士阻击长鑫优先供应中国手机厂商LPDDR6 小米首发" class="aBlack">SK海力士阻击长鑫优先供应中国手机厂商LPDDR6 小米首发</a></dt> </dl> </li> <li> <span> <a href="/article/991234/" title="最具性价比2nm芯片天玑9600价格偷跑，比骁龙8E6更实惠"><img src="https://img.xiayx.com/uploadfile/news/202607296a69d6e979382..jpg" alt="最具性价比2nm芯片天玑9600价格偷跑，比骁龙8E6更实惠" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/991234/" title="最具性价比2nm芯片天玑9600价格偷跑，比骁龙8E6更实惠" class="aBlack">最具性价比2nm芯片天玑9600价格偷跑，比骁龙8E6更实惠</a></dt> </dl> </li> <li> <span> <a href="/article/991233/" title="世界杯为何由三国共同举办？"><img src="https://img.xiayx.com/uploadfile/news/202607296a69d6e00bec2..jpg" alt="世界杯为何由三国共同举办？" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/991233/" title="世界杯为何由三国共同举办？" class="aBlack">世界杯为何由三国共同举办？</a></dt> </dl> </li> <li> <span> <a href="/article/991174/" title="vivo X500系列入网：三款旗舰首发2nm芯片天玑9600 Pro"><img src="https://img.xiayx.com/uploadfile/news/202607296a69d181b9a5e..jpg" alt="vivo X500系列入网：三款旗舰首发2nm芯片天玑9600 Pro" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a> </span> <dl> <dt><a href="/article/991174/" title="vivo X500系列入网：三款旗舰首发2nm芯片天玑9600 Pro" class="aBlack">vivo X500系列入网：三款旗舰首发2nm芯片天玑9600 Pro</a></dt> </dl> </li> <div class="clear"></div> </ul> </div> <div class="mnxDqzcBox"> <div class="mnxPhbTitle"> <b></b> <h2>热游推荐</h2> <em><a href="/sy/" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="mnxSyyxList"> <li> <span><a href="/xiazai/902144362.html" title="DreamStudio"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782787849669912.jpg" alt="DreamStudio" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144362.html" title="DreamStudio" class="aBlack">DreamStudio</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144362.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144361.html" title="Pixlr"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782787989689086.png" alt="Pixlr" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144361.html" title="Pixlr" class="aBlack">Pixlr</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144361.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144360.html" title="Playground AI"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782788078809028.png" alt="Playground AI" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144360.html" title="Playground AI" class="aBlack">Playground AI</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144360.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144359.html" title="Adobe Firefly"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782788340724269.png" alt="Adobe Firefly" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144359.html" title="Adobe Firefly" class="aBlack">Adobe Firefly</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144359.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144358.html" title="Canva AI"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782788417338107.png" alt="Canva AI" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144358.html" title="Canva AI" class="aBlack">Canva AI</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144358.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144357.html" title="Ideogram"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782788497796805.png" alt="Ideogram" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144357.html" title="Ideogram" class="aBlack">Ideogram</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144357.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144356.html" title="Leonardo AI"><img src="https://img.xiayx.com/uploadfile/info/20260630/17827885894097.jpg" alt="Leonardo AI" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144356.html" title="Leonardo AI" class="aBlack">Leonardo AI</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144356.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> <li> <span><a href="/xiazai/902144355.html" title="Stable Diffusion"><img src="https://img.xiayx.com/uploadfile/info/20260630/1782788859817029.png" alt="Stable Diffusion" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /></a></span> <div class="mnxSyyxCont"> <dl> <dt><a href="/xiazai/902144355.html" title="Stable Diffusion" class="aBlack">Stable Diffusion</a></dt> <dd class="cont1">Android/ <i>|</i> <a href="/xiazai/1048_1/" title="AI绘图" class="bBlack">AI绘图</a></dd> <dd>2026-06-30</dd> </dl> <em><a href="/xiazai/902144355.html" title="下载">下载</a></em> <div class="clear"></div> </div> <div class="clear"></div> </li> </ul> </div> <div class="mnxDqzcBox2"> <div class="mnxPhbTitle"> <b></b> <h2>精彩专题</h2> <em><a href="/zhuanti/bb_1/" title="更多"><i>更多</i><b></b></a></em> <div class="clear"></div> </div> <ul class="mnxJcztList"> <li> <a href="/zhuanti/404232/" title="代号鸢" class="aWhite"> <img src="/upload/20230516/168420084782584.jpg" alt="代号鸢" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>代号鸢</span> </a> </li> <li> <a href="/zhuanti/396555/" title="都是人情世故" class="aWhite"> <img src="/upload/20230428/1682647396684343.jpg" alt="都是人情世故" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>都是人情世故</span> </a> </li> <li> <a href="/zhuanti/391309/" title="鹅鸭杀" class="aWhite"> <img src="/upload/20230421/1682054340389332.png" alt="鹅鸭杀" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>鹅鸭杀</span> </a> </li> <li> <a href="/zhuanti/389498/" title="轮回茶肆" class="aWhite"> <img src="/upload/20230517/1684288431506773.png" alt="轮回茶肆" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>轮回茶肆</span> </a> </li> <li> <a href="/zhuanti/388632/" title="我和我的大学" class="aWhite"> <img src="/upload/20230421/1682056161739328.png" alt="我和我的大学" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>我和我的大学</span> </a> </li> <li> <a href="/zhuanti/387989/" title="愣子跑酷" class="aWhite"> <img src="/upload/20230420/1681954517272978.png" alt="愣子跑酷" onerror="this.src='/style/style2022/mob/mobimages/moren/236_132.png'" /> <span>愣子跑酷</span> </a> </li> <div class="clear"></div> </ul> </div> </div>   <div class="mnxFoot"> <div class="mnxFootMenu"> <div class="mnxFootMenuIn"> <a href="/game/988_1/" title="手游">手游</a> <a href="/zhuanti/bb_1" title="专题">专题</a> <a href="/newslist/825_1.html" title="攻略">攻略</a> <a href="/xiazai/938_1/" title="App下载">App下载</a> <a href="/newslist/1004_1.html" style="color:#303133;">web3</a> <div class="clear"></div> </div> </div> <div class="mnxFootFan"> <div class="mnxFootFanIn"> <a href="/" title="返回首页">返回首页</a> <a href="#" title="回到顶部">回到顶部</a> <div class="clear"></div> </div> </div> <div class="mnxFootMsg"> <dl> <dt>湘ICP备14008430号-1 湘公网安备 43070302000280号</dt> <dd>All Rights Reserved </dd> </dl> <dl> <dt>本站为非盈利网站，不接受任何广告。本站所有软件，都由网友</dt> <dd>上传，如有侵犯你的版权，请发邮件给xiayx666@163.com</dd> </dl> <dl> <dt>抵制不良色情、反动、暴力游戏。注意自我保护，谨防受骗上当。</dt> <dd>适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</dd> </dl> </div> </div> <script src="https://style.xiayx.com/js/jumbpc.js?v=20260710" type="text/javascript"></script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?075ab887d0dd167df1a8b41de83e8c61"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  </div> </body> </html>