目录
一:基本用法
基本案例:
二:静态表格
三:模板配置渲染
四:静态表格转换
五:已知数据渲染
六:自定义模板
API
渲染
一:基本用法
表格组件 table
是 Layui 中使用率极高的一个组件,它以表格的承载方式对数据进行渲染、重载、排序、统计、分页等等一系列交互操作,并提供了丰富的 API 用于扩展,基本涵盖了日常业务所涉及的大部分需求
基本案例:
table 组件综合演示 - Layui
二:静态表格
静态表格是指内容已经存在于页面中的 元素,且可通过一些特定属性设定不同风格
默认风格:
人物 |
民族 |
格言 |
孔子 |
华夏 |
有朋至远方来,不亦乐乎 |
孟子 |
华夏 |
穷则独善其身,达则兼济天下 |
行边框表格:
人物 |
民族 |
格言 |
孔子 |
华夏 |
有朋至远方来,不亦乐乎 |
孟子 |
华夏 |
穷则独善其身,达则兼济天下 |
列边框表格:
人物 |
民族 |
格言 |
孔子 |
华夏 |
有朋至远方来,不亦乐乎 |
孟子 |
华夏 |
穷则独善其身,达则兼济天下 |
无边框表格:
人物 |
民族 |
格言 |
孔子 |
华夏 |
有朋至远方来,不亦乐乎 |
孟子 |
华夏 |
穷则独善其身,达则兼济天下 |
小尺寸表格:
人物 |
民族 |
格言 |
孔子 |
华夏 |
有朋至远方来,不亦乐乎 |
孟子 |
华夏 |
穷则独善其身,达则兼济天下 |
大尺寸表格:
人物 |
民族 |
格言 |
孔子 |
华夏 |
有朋至远方来,不亦乐乎 |
孟子 |
华夏 |
穷则独善其身,达则兼济天下 |
开启偶数行背景色:
人物 |
民族 |
格言 |
孔子 |
华夏 |
有朋至远方来,不亦乐乎 |
孟子 |
华夏 |
穷则独善其身,达则兼济天下 |
庄子 |
华夏 |
朴素而天下莫能与之争美 |
三:模板配置渲染
四:静态表格转换
人物 |
民族 |
格言 |
孔子 |
华夏 |
有朋至远方来,不亦乐乎 |
孟子 |
华夏 |
穷则独善其身,达则兼济天下 |
庄子 |
华夏 |
朴素而天下莫能与之争美 |
五:已知数据渲染
六:自定义模板
七:自定义样式
table 自定义样式 - Layui
API
API |
描述 |
var table = layui.table |
获得 table 模块。 |
table.render(options) |
table 组件渲染,核心方法。 |
table.init(filter, options) |
初始化渲染静态表格。 |
table.reload(id, options, deep) |
表格完整重载。 |
table.reloadData(id, options, deep) 2.7+ |
表格数据重载。 |
table.checkStatus(id) |
获取选中行相关数据。 |
table.setRowChecked(id, opts) 2.8+ |
设置行选中状态。 |
table.getData(id) |
获取当前页所有行表格数据。 |
table.cache |
获取表格缓存数据集(包含特定字段)。 |
table.resize(id) |
重置表格尺寸。 |
table.exportFile(id, data, opts) |
导出表格数据到本地文件。 |
table.getOptions(id) 2.8+ |
获取表格实例配置项。 |
table.hideCol(id, cols) 2.8+ |
设置表格列的显示隐藏属性。 |
table.on('event(filter)', callback) |
table 相关事件。 |
渲染
table 提供了以下三种渲染模式,在实际使用时,一般按情况选择其中一种即可。
渲染方式 |
描述 |
方法配置渲染 |
通过 table 组件提供的核心方法 table.render(options) 完成的渲染。推荐 |
模板配置渲染 |
通过 标签的 lay-options="{}" 属性定义模板,组件自动对其进行解析并完成渲染。
静态表格渲染 |
对一段已经包含数据内容的静态表格进行动态化转换,使其具备 table 组件的相关功能。 |
|