layui.table数据表格的使用

作者：李光辉
撰写时间：2019.4.22

通常情况下，根据给定的查询条件对数据库进行查询，然后将查询出来的数据用数据表格显示到页面上，以便于对数据的观察和进行操作。

简单介绍一下：table数据表格

它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。

使用table
数据表格需要引用一下layui插件

用实例来演示一下如何加载和初始化layui表格：如果你采用的是方法渲染，cols 是一个二维数组，表头参数设定在数组内；如果你采用的自动渲染，表头参数的设定应放在 标签上。

URL：接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request
自定义） page 代表当前页码、limit 代表每页数据量。

绑定容器、设置数据接口、在表头设定对应的字段，同时注意在使用之前需要声明一下：var layer, layuiTable;

基本的常用功能如下：

如下图，如果你需要在表格的每一行加上修改、删除这样类似的操作按钮，使用的同时可自定义设置操作按钮。

自定义设置操作按钮，需要给按钮绑定点击事件，同时当你点击每一行后面自定义的操作按钮时，获取到的需要操作的数据就是所选行数据

事件监听：语法：table.on(‘event(filter)’,
callback); 注：event为内置事件名，filter为容器lay-filter设定的值 ，默认情况下，事件所监听的是全部的table模块容器，但如果你只想监听某一个容器，使用事件过滤器即可

常用的事件监听一般是监听复选框选择、监听行单双击事件

点击复选框时触发，回调函数返回一个object参数（参考layui开发使用文档）：

点击或双击行时触发（参考layui开发使用文档）：

假设原始容器为：

实例演示事件监听写法如下：

表格数据的重载：

自动化渲染：table.reload(ID, options) 参数 ID 即为基础参数id对应的值参数 options 即为各项基础参数

方法级渲染：tableIns.reload(options) 对象 tableIns 来源于 table.render() 方法的实例

参数 options 即为各项基础参数

注意：这里的表格重载是指对表格重新进行渲染，包括数据请求和基础参数的读取

简单layui.table数据表格的使用介绍就先到这里了，根据自己的理解和实质应用作知识点总结，需要具体了解更多用法和知识点请参考官方的文件：layui开发使用文档——入门指南哦