Layui快速入门之第八节表格渲染与属性的使用

最新推荐文章于 2024-07-30 16:49:30 发布

渊婉

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量1.2k

点赞数

分类专栏： Layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_61313896/article/details/132875492

版权

一：表格的渲染

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)` 完成的渲染。推荐
模板配置渲染	通过 `<table>` 标签的 `lay-options="{}"` 属性定义模板，组件自动对其进行解析并完成渲染。
静态表格渲染	对一段已经包含数据内容的静态表格进行动态化转换，使其具备 table 组件的相关功能。

方法配置渲染

table.render(options);

参数 options : 基础属性配置项。#详见属性

该方法返回当前实例对象，包含可操作当前表格的一些成员方法。

<table id="test"></table>
 
<script>
layui.use(function(){
  var table = layui.table;
  
  // 渲染，并获得实例对象
  var inst = table.render({
    elem: '#test', // 绑定元素选择器
    // 其他属性
    // …
  });
 
  // 实例对象成员
  inst.config; // 当前表格配置属性
  inst.reload(options, deep); // 对当前表格的完整重载。参数 deep 表示是否深度重载。
  inst.reloadData(options, deep); // 对当前表格的数据重载。参数 deep 同上。
  inst.resize(); // 对当前表格重新适配尺寸
  inst.setColsWidth() // 对当前表格重新分配列宽
})
</script>

模板配置渲染

在 <table> 元素中直接书写 lay-options="{}" 属性，组件将自动对其进行解析并完成渲染。

<!-- 此处 `lay-options` 定义基础属性 -->
<table class="layui-table" lay-options="{url: ''}" id="test">
  <thead>
    <tr>
      <!-- 此处 `lay-options` 定义表头属性 -->
      <th lay-options="{field: 'title'}">Title</th> 
    </tr>
  </thead>
</table>

2.8 之前版本通过 lay-data="{}" 定义属性配置项；
2.8+ 版本推荐采用 lay-options，但同时兼容 lay-data。

静态表格渲染

table.init(filter, options);

参数 filter : <table> 元素对应的 lay-filter 属性值
参数 options : 基础属性配置项。#详见属性

该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件

<table lay-filter="test">
  表格内容
</table>
 
<script>
layui.use(function(){
  var table = layui.table;
  // 将静态表格进行动态化
  table.init('test', {
    height: 366,
    // 其他属性
    // …
  });
});
</script>

二：表格的属性

属性是指 table 渲染、重载 时的配置选项（options），它本身是一个 object 参数。如：

// 渲染
table.render({
  // options
  elem: '',
  cols: [[]],
  // …
}); 
// 重载
table.reload(id, {
  // options
});
       
若为模板配置渲染，则 lay-options 或 lay-data 的属性值即为属性的配置选项（：
<table lay-options="{url: ''}"> … </table>

table 的属性众多，我们大致分为以下几种：

属性类别	描述
基础属性	-
异步属性	用于和异步数据请求相关的基础属性，由于相关属性成员较多，所以单独提取介绍。
表头属性	基础属性 `cols` 的子属性集。

基础属性

属性名	描述	类型	默认值
elem	绑定原始 table 元素，方法渲染方式必填。	string/DOM	-
url	发送异步请求的 URL。更多异步相关属性见 : #异步属性	-	-
cols	表头属性集，通过二维数组定义多级表头。方法渲染时必填。更多表头属性见 : #表头属性	array	-
data	直接赋值数据。既适用于只展示一页数据，也能对一段已知数据进行多页展示。该属性与 `url` 属性只能二选一。</