Layui快速入门之第七节 表格

目录

一:基本用法

基本案例:

二:静态表格

三:模板配置渲染

四:静态表格转换

五:已知数据渲染

六:自定义模板

API

渲染


一:基本用法

            表格组件 table 是 Layui 中使用率极高的一个组件,它以表格的承载方式对数据进行渲染、重载、排序、统计、分页等等一系列交互操作,并提供了丰富的 API 用于扩展,基本涵盖了日常业务所涉及的大部分需求

基本案例:




  
  table 组件综合演示 - Layui
  
  
  
  



二:静态表格

             静态表格是指内容已经存在于页面中的 

 元素,且可通过一些特定属性设定不同风格   

默认风格:

人物 民族 格言
孔子 华夏 有朋至远方来,不亦乐乎
孟子 华夏 穷则独善其身,达则兼济天下

行边框表格:

人物 民族 格言
孔子 华夏 有朋至远方来,不亦乐乎
孟子 华夏 穷则独善其身,达则兼济天下

列边框表格:

人物 民族 格言
孔子 华夏 有朋至远方来,不亦乐乎
孟子 华夏 穷则独善其身,达则兼济天下

无边框表格:

人物 民族 格言
孔子 华夏 有朋至远方来,不亦乐乎
孟子 华夏 穷则独善其身,达则兼济天下

小尺寸表格:

人物 民族 格言
孔子 华夏 有朋至远方来,不亦乐乎
孟子 华夏 穷则独善其身,达则兼济天下

大尺寸表格:

人物 民族 格言
孔子 华夏 有朋至远方来,不亦乐乎
孟子 华夏 穷则独善其身,达则兼济天下

开启偶数行背景色:

人物 民族 格言
孔子 华夏 有朋至远方来,不亦乐乎
孟子 华夏 穷则独善其身,达则兼济天下
庄子 华夏 朴素而天下莫能与之争美

三:模板配置渲染

ID 用户名 性别 城市 签名 积分 评分 职业

四:静态表格转换

人物 民族 格言
孔子 华夏 有朋至远方来,不亦乐乎
孟子 华夏 穷则独善其身,达则兼济天下
庄子 华夏 朴素而天下莫能与之争美

五:已知数据渲染

六:自定义模板

七:自定义样式




  
  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 组件的相关功能。

你可能感兴趣的:(Layui,layui,前端,javascript)