layui 滚动数据_LayUI之旅-数据表格

layui的数据表格是使用频率非常高的组件，在入门篇，我们已经大致了了解了数据表格的方法级渲染，接下来我们深入研究和学习layui-table组件的使用方法。

1、渲染方式

数据表格的渲染方式有三种，这是官方对三种渲染方式的场景介绍：

方式

机制

适用场景

方法渲染

用JS方法的配置完成渲染

(推荐)无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。

自动渲染

HTML配置，自动渲染

无需写过多 JS，可专注于 HTML 表头部分

转换静态表格

转化一段已有的表格元素

无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

注：和官方一样，我在这里同样推荐使用方法渲染的方式，但在有些场景下还是更适合使用自动渲染的方法。

方法渲染

可以看到，table.render()接收一个对象options，options的可能值参见基础参数一览表。

自动渲染

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

1) 带有 class="layui-table" 的

2) 对标签设置属性 lay-data="" 用于配置一些基础参数

3) 在

标签中设置属性lay-data=""用于配置表头信息

示例：

转换静态表格

示例：

2、表格重载

数据表格的精髓——数据重载，我们在很多场景下都可能会用到他，比如搜索，排序等等。

语法

说明

适用场景

table.reload(ID, options)

参数 ID 即为基础参数id对应的值，见：设定容器唯一ID

参数 options 即为各项基础参数

所有渲染方式

tableIns.reload(options)

参数同上

tableIns 可通过 var tableIns = table.render() 得到

仅限方法级渲染

基础参数一览表

参数

类型

说明

示例值

elem

String/DOM

指定原始 table 容器的选择器或 DOM，方法渲