5. Layui数据表格的快速使用

飘向天边，我们慢慢明白，有些告别，就是最后一面。——《云边有个小卖部》

1.什么是数据表格

用于对表格进行一些列功能和动态化数据操作，比如统计数值, 数据排序

支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格

长这样

2.方法渲染

是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：

<table id="demo" lay-filter="test">table>
1

var table = layui.table;
 
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录：基本参数选项
});
1
2
3
4
5
6
7
8
9

3.自动渲染

在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

1. 带有 class=“layui-table” 的 标签。
   对标签设置属性 lay-data=“” 用于配置一些基础参数
   在

   标签中设置属性lay-data=""用于配置表头信息 按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。 比如: <table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test"> <thead><tr><th lay-data="{field:'id', width:80, sort: true}">IDth> <th lay-data="{field:'sign'}">签名th> <th lay-data="{field:'score', sort: true}">评分th> <th lay-data="{field:'classify'}">职业th> <th lay-data="{field:'wealth', sort: true}">财富th> tr>thead>table> 1 2 3 4 5 6 4.把静态表格转换为动态 如果页面已经存在了一段有内容的表格，它由原始的table标签组成，如果需要赋予它一些动态元素，比如拖拽调整列宽？比如排序等等？ 就在 th 标签中加上 lay-data=“” 属性 比如: <table lay-filter="demo"><thead><tr> <th lay-data="{field:'username', width:100}">昵称th> <th lay-data="{field:'experience', width:80, sort:true}">积分th> <th lay-data="{field:'sign'}">签名th>tr>thead> <tbody><tr> <td>小阿宁的猫猫td> <td>66td> <td>白茶清欢无别事td> tr>tbody>table> 1 2 3 4 5 6 7 8 9 相关阅读: 百闻不如一见，4款名不见经传的极品软件，让你眼界大开 MQ系列8：数据存储，消息队列的高可用保障 系统移植部署开发阶段 SpringCloud-05 Hystrix学习笔记 Nginx几种负载均衡方式介绍 【51单片机】DS18B20（江科大） SAP UX 用户体验师这个职位的技能要求和日常工作内容介绍 【老生谈算法】基于MATLAB的高通滤波器的优化设计——滤波器 软件设计师软考题目解析12 --每日五题 双目视觉（双目相机） 原文地址：https://blog.csdn.net/dyjkl/article/details/126287623 最新文章 沪漂五周年了：我越来越迷茫了 Agentic Skill Routing 实战：别再把所有 Skill 塞进 AI Agent 上下文 MySQL-Seconds_behind_master的精度误差 [MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间 AI的至暗历史：从万众期待到被政府撤资，AI的两次死亡徘徊 Agent OS ：五种驯服不确定性的范式 PortSwigger SQL注入LAB11 数据库即时编译JIT [Begin]AI Learn Data Day 0 深度学习进阶（二十七）现代 LLM 的核心架构设计其二：SwiGLU 热门文章 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！ 奉劝各位学弟学妹们，该打造你的技术影响力了！ 五年了，我在 CSDN 的两个一百万。 Java俄罗斯方块，老程序员花了一个周末，连接中学年代！ 面试官都震惊，你这网络基础可以啊！ 你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法 心情不好的时候，用 Python 画棵樱花树送给自己吧 通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！ 13 万字 C 语言从入门到精通保姆级教程2021 年版 10行代码集2000张美女图，Python爬虫120例，再上征途