0

0

layui form自动填充数据 layui如何根据ID回显表单信息

煙雲

煙雲

发布时间:2026-03-16 13:12:12

|

759人浏览过

|

来源于php中文网

原创

layui form.setValue 填不进数据,主因是未调用 form.render() 初始化表单或 name 属性不匹配;动态插入表单须在 DOM 插入后、setValue 前执行 form.render();日期、下拉框、开关等增强组件需单独处理回显。

layui form.setValue 填不进数据?先确认 form.render 是否执行

表单元素存在但 form.setvalue 没反应,大概率是表单还没被 layui 初始化。layui 的 form 模块不会自动监听 dom 变化,动态插入或后置渲染的表单必须手动调用 form.render() 才能启用验证、赋值等功能。

  • 如果表单是页面加载时就存在的静态 HTML,form.render() 通常只需在 layui.use(['form'], ...) 回调里调用一次
  • 如果表单是 Ajax 加载后插入的(比如弹窗里动态生成),必须在插入 DOM 后、调用 setValue 前执行 form.render('select') form.render()
  • 漏掉这步,form.setValue({}) 看似执行成功,实际什么都不会发生——控制台也无报错,非常隐蔽

回显时 name 属性对不上?ID 和 name 不是一回事

layui 表单填充依赖的是 name 属性,不是元素 ID。即使你用 document.getElementById('user_name') 能取到输入框,form.setValue 也不会认它——除非这个 <input>name="user_name"

  • 检查所有要回显的控件:<input name="username"><select name="role"><textarea name="remark">,name 值必须和传给 setValue 的对象 key 完全一致(区分大小写)
  • ID 只用于 CSS 或 JS 查找,对 layui 表单逻辑无意义;别指望 form.setValue({ 'id': '123' }) 能填进 <input id="user_id">
  • checkbox/radio 的 name 需保持一致,value 值必须和后端返回的完全匹配(字符串相等),否则勾选失败

异步加载数据后 setValue 失效?注意执行时机

Ajax 成功回调里直接写 form.setValue(data) 仍可能失败,常见于表单尚未渲染完成,或回调执行早于 form.render()

  • 确保数据请求完成、DOM 插入完毕、form.render() 已调用,三者顺序不能乱
  • 不要把 form.setValue 写在请求发起前,也不要放在 setTimeout 里靠“猜时间”来延迟执行
  • 推荐结构:
    $.get('/api/user/1', function(res) {
      form.render(); // 确保已渲染
      form.setValue(res.data); // 再赋值
    });

日期、下拉框、开关等组件回显不了?它们需要额外处理

layui 的 form.setValue 对普通 input/textarea/select 有效,但对 laydatelayselect(非原生 select)、switch 等增强组件,仅设 value 不足以触发 UI 更新。

OpenJobs AI
OpenJobs AI

AI驱动的职位搜索推荐平台

下载
  • 日期控件:需用 laydate.render({ elem: '#start_time', value: res.data.start_time }) 单独初始化,或调用 laydateIns.set({value: '2024-05-01'})
  • 下拉框(layselect):若用的是 lay-filter="city" 的自定义下拉,form.setValue 不生效,得用 form.val('filterName', { city: 'bj' }) 并配合 form.render('select')
  • 开关(switch):form.setValue 可设值,但 UI 不同步,应改用 form.switch('switchElem', true)(需 layui 2.8+)或手动触发 change 事件

这些组件的回显逻辑彼此独立,没法靠一个 setValue 全局搞定。最容易被忽略的是:你以为填进去了,其实只是 value 属性变了,UI 还停在初始状态。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

166

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

170

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

124

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

260

2024.09.24

switch语句用法
switch语句用法

switch语句用法:1、Switch语句只能用于整数类型,枚举类型和String类型,不能用于浮点数类型和布尔类型;2、每个case语句后面必须跟着一个break语句,以防止执行其他case的代码块,没有break语句,将会继续执行下一个case的代码块;3、可以在一个case语句中匹配多个值,使用逗号分隔;4、Switch语句中的default代码块是可选的等等。

570

2023.09.21

Java switch的用法
Java switch的用法

Java中的switch语句用于根据不同的条件执行不同的代码块。想了解更多switch的相关内容,可以阅读本专题下面的文章。

441

2024.03.13

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

761

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

C++多线程并发控制与线程安全设计实践
C++多线程并发控制与线程安全设计实践

本专题围绕 C++ 在高性能系统开发中的并发控制技术展开,系统讲解多线程编程模型与线程安全设计方法。内容包括互斥锁、读写锁、条件变量、原子操作以及线程池实现机制,同时结合实际案例分析并发竞争、死锁避免与性能优化策略。通过实践讲解,帮助开发者掌握构建稳定高效并发系统的关键技术。

2

2026.03.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号