Layui表格如何动态增加一行数据

冬枫同学_5746

冬枫同学_5746

2026-04-02

324人浏览

原创

layui.table.reload()不能直接加行,须改table.cache后调用table.render()重绘;2.8+可用table.addrow()但仅限本地数据且不更新cache。

layui.table.reload() 不能直接加行,得用 table.cache + table.render() 重绘

很多人试过调 table.reload() 传新数据进去,发现表格没反应——因为这个方法只刷新已有行的渲染,不支持“追加”。真正能动态加一行的,是手动改 table.cache 然后触发重绘。

核心逻辑是:拿到当前表格实例的缓存数据 → 推入新对象 → 调用 table.render() 重新生成表格(注意不是 reload())。

  • table.cache 是个对象,键为表格 id,值为原始数据数组,可直接 push()
  • 必须确保新数据对象的字段和列定义 cols 中的 field 严格对应,否则显示为空
  • 如果用了分页,新增行不会自动翻页,得手动控制 page.curr 或清空分页跳到第一页

如何安全获取并修改 table.cache 中的数据

不能直接写 table.cache['myTable'].push(...) —— 因为表初始化前 cache 可能还没挂载,或 id 写错导致 undefined。得先确认缓存存在且可写。

  • 用 layui.table.get('myTable') 拿实例,再读 config.data 更稳妥(尤其开启 url 异步加载时)
  • 如果确定走本地数据(data: []),才直接操作 table.cache['myTable']
  • 修改后记得深拷贝一份再传给 render(),避免引用污染(尤其多人协作改同一数组)

示例:

const myData = layui.table.cache.myTable || [];  
myData.push({ id: Date.now(), name: '张三', status: '启用' });  
layui.table.render({  
  elem: '#myTable',  
  data: [...myData], // 注意这里用展开运算符复制  
  cols: [[ /* 原列配置 */ ]],  
  page: true  
});

新增行后排序、筛选失效?因为 table.render() 会丢掉当前状态

每次调 table.render() 都是全新渲染,之前选中的行、排序字段、搜索关键词全没了。这不是 bug,是设计如此。

  • 如果需要保留排序,得自己记下 table.config.sort 和 table.config.where,重绘时传回去
  • 筛选框(如 toolbar 自定义搜索)要手动同步 value,并在 done 回调里恢复高亮
  • 更轻量的做法:不用 render(),改用 table.addRow()(Layui 2.8+ 新增)——但它只支持单页模式,且不触发分页更新

用 table.addRow() 快速加行,但要注意兼容性和限制

2.8 版本起官方提供了 table.addRow(),看起来最直觉,但实际用起来容易踩坑。

  • 仅支持本地数据(data 数组),不支持 url 远程加载场景
  • 加完行后,table.cache 不会自动更新,后续调 reload() 会丢掉这行
  • 如果开启了 height 固定高度,新增行可能被截断,需手动调 table.resize()
  • 参数必须是对象,不能是数组;字段名必须和 cols 中 field 完全一致,大小写敏感

示例:

layui.table.addRow('myTable', {  
  id: Date.now(),  
  name: '李四',  
  status: '禁用'  
});

真正麻烦的不是加一行,而是加完之后表格还“认得”它——包括排序、导出、选中、分页计数。这些状态分散在不同地方,一动就漏。别指望一个 API 全搞定,得根据你的数据来源和交互深度选方案。

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

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

相关专题

更多
ajax教程
ajax教程

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

2023.06.14

2920

4

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

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

2023.08.31

360

5

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

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

2023.11.15

2733

5

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

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

2024.09.24

1161

6

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

2026.10.16

60

10

OpenJDK怎么配置Java开发环境
OpenJDK怎么配置Java开发环境

怎样用OpenJDK搭建开发环境?本专题介绍版本选择、下载安装、环境变量配置和编译运行验证,帮助你理清JDK的作用及基本配置流程,并通过简单程序检查环境是否可用,为后续项目开发做好准备。

2026.10.16

40

10

OpenJDK怎么部署Java应用
OpenJDK怎么部署Java应用

Java项目开发完成后,怎样部署到目标环境并正常运行?本专题介绍OpenJDK应用部署流程,涵盖运行环境准备、版本兼容检查、应用打包、启动参数配置和日志查看,帮助你理清部署前后的操作顺序,减少环境差异造成的运行问题。

2026.10.16

40

10

Revel框架模板渲染与表单验证
Revel框架模板渲染与表单验证

本专题围绕Revel框架视图层开发,介绍模板语法、变量输出、布局复用、表单提交、参数绑定与验证规则,帮助开发者完成安全规范的页面交互。

2026.10.16

20

15

Revel框架MVC路由与控制器
Revel框架MVC路由与控制器

本专题聚焦Revel框架MVC核心机制,讲解路由定义、控制器Action、参数绑定、请求响应和反向路由,并结合常见场景梳理接口请求处理流程。

2026.10.16

20

15

热门下载

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

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.7万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.8万人学习