使用layui渲染数据表格

使用layui渲染数据表格

开发工具与关键技术：JS

作者：李宥良

撰写时间：2019年4月25日

使用layui渲染数据表格

今天教大家用layui渲染数据表格，

快速使用

我先来为大家介绍表格

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括
caption、col、colgroup、thead、tfoot 以及 tbody
元素

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框

正文到了，怎么把表格数据渲染进去呢？咱们下面第三部就是渲染的方法，叫“方法渲染”，layui官网提供的三种渲染方法，在这里不做陈述，方法渲染的优点是：你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显，layui的url默认是“get”请求，我这边是post请求，所以记得加上“method”属性为post,6,容易碰到的问题，按理来说这个时候应该已经可以看到表格数据了，为什么大多数人的表格还是渲染不出来呢？一般是因为你配置后台数据格式

创建一个table实例最简单的方式是，在页面放置一个元素

，然后通过 table.render() 方法指定该容器就可以了

上面你已经看到了一个简单数据表格的基本样子，你一定迫不及待地想知道它的使用方式

下面我就来教大家

layui有三种初始化渲染方式。但其使用方式并不止那一种。你可按照个人喜好和实际情况灵活使用

第一种 方法渲染 它的机制是用JS方法的配置完成渲染
适用场景：无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可

第二种 自动渲染 它的机制是HTML配置，自动渲染 适用场景：无需写过多 JS，可专注于 HTML 表头部分

第三种 转换静态表格 它的机制是转化一段已有的表格元素 适用场景：无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

我就教大家使用第一种方法渲染

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

我推荐大家采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了

这个时候表格一般已经是出来了，记得，后台提供的数据格式，和layui提供的一样最好，这一点要切记，这一点大家可以去官网上看下，不做说明

最终效果图

下面是 table 模块的参数一览表

参数 / 类型 / 说明

Elem / String/DOM 、 指定原始 table 容器的选择器或 DOM，方法渲染方式必填

Cols / Array / 设置表头。值是一个二维数组。方法渲染方式必填

url / - / 异步数据接口相关参数。其中 url 参数为必填项