目录
一:基本用法
基本案例:
二:静态表格
三:模板配置渲染
四:静态表格转换
五:已知数据渲染
六:自定义模板
API
渲染
表格组件 table
是 Layui 中使用率极高的一个组件,它以表格的承载方式对数据进行渲染、重载、排序、统计、分页等等一系列交互操作,并提供了丰富的 API 用于扩展,基本涵盖了日常业务所涉及的大部分需求
table 组件综合演示 - Layui
静态表格是指内容已经存在于页面中的 默认风格: 行边框表格: 列边框表格: 无边框表格: 小尺寸表格: 大尺寸表格: 开启偶数行背景色: 七:自定义样式 table 提供了以下三种渲染模式,在实际使用时,一般按情况选择其中一种即可。 元素,且可通过一些特定属性设定不同风格
人物
民族
格言
孔子
华夏
有朋至远方来,不亦乐乎
孟子
华夏
穷则独善其身,达则兼济天下
人物
民族
格言
孔子
华夏
有朋至远方来,不亦乐乎
孟子
华夏
穷则独善其身,达则兼济天下
人物
民族
格言
孔子
华夏
有朋至远方来,不亦乐乎
孟子
华夏
穷则独善其身,达则兼济天下
人物
民族
格言
孔子
华夏
有朋至远方来,不亦乐乎
孟子
华夏
穷则独善其身,达则兼济天下
人物
民族
格言
孔子
华夏
有朋至远方来,不亦乐乎
孟子
华夏
穷则独善其身,达则兼济天下
人物
民族
格言
孔子
华夏
有朋至远方来,不亦乐乎
孟子
华夏
穷则独善其身,达则兼济天下
人物
民族
格言
孔子
华夏
有朋至远方来,不亦乐乎
孟子
华夏
穷则独善其身,达则兼济天下
庄子
华夏
朴素而天下莫能与之争美
三:模板配置渲染
ID
用户名
性别
城市
签名
积分
评分
职业
四:静态表格转换
人物
民族
格言
孔子
华夏
有朋至远方来,不亦乐乎
孟子
华夏
穷则独善其身,达则兼济天下
庄子
华夏
朴素而天下莫能与之争美
五:已知数据渲染
六:自定义模板
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.render(options)
完成的渲染。推荐
模板配置渲染
通过 标签的
lay-options="{}"
属性定义模板,组件自动对其进行解析并完成渲染。
静态表格渲染
对一段已经包含数据内容的静态表格进行动态化转换,使其具备 table 组件的相关功能。