Layui 13 Table 表格组件

1、渲染方式

方式 1：转换静态表格
table.init() （下面一级标题）

方式 2：自动渲染（配置属性写在标签上）
渲染无需调用 api，但要数据。
api 渲染表格

方式 3：api 渲染
推荐使用 api 渲染；（可控性较高）
table.render(opt)
（比较多，独立到一个单独文件中）

2、配置项

见 tabler.render(opt)

3、表格事件监听

见 table.on(‘event(filter)’, callback(obj)（下面一级标题）

4、交互

表格重载

【~】即对一段已经渲染好的表格重新设置属性并渲染。

【分类】

• 完整重载 table.reload(id, options, deep) （下面一级标题）
• 仅数据重载 v2.7+ table.reloadData(id, options, deep)（下面一级标题）
• 重新渲染数据 v2.8.5+ table.renderData()（下面一级标题）

tip: 重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。

获取选中行数据

table.checkStatus(id)（下面一级标题）

设置行选中状态

v2.8+ table.setRowChecked(id, opts)（下面一级标题）

api

table.setRowChecked()

语法

【版本】v2.8+

/**
 * @brief: 设置行选中状态
 * @param {string} id table 渲染时的 id 属性值
 * @param {string|number|array} opts 设置行选中时的可选属性 （详细见下）
 * @return {*}
 */
table.setRowChecked(id, opts)

第 2 参数 opts

type

【属性】选中方式。

【值】{string}
‘checkbox’ (def)
‘radio’

index

【属性】选中行的下标。支持以下几种情况：
【值】
{number} 表示行所在的数组下标（0 开头）
{array} v2.9.1+，表示多选下标
{string} 可设置 ‘all’ 操作全选。

checked

【属性】选中状态值。

【值】{boolean}
若传递该属性，则赋值固定值。
若不传递该属性（默认），则 checkbox 将在 true|false 中自动切换值，而 radio 将赋值 true 固定值。v2.8.4+
注意：若 index 指定为多选或全选，checked 应当显式传递固定值。

示例

// 渲染
table.render({
  elem: '',
  id: 'test',
})

// 设置某行选中
table.setRowChecked('test', {
  index: 0,
})

// 批量选中行
table.setRowChecked('test', {
  index: [1, 3, 5], // v2.9.1+
})

// 取消选中行
table.setRowChecked('test', {
  index: 'all',
  checked: flase,
})

简单示例

table.checkStatus()

语法

/**
 * @brief: 用于获取表格当前选中行相关数据
 * @param {string} id 表格渲染时的 id 属性值
 * @return {*}
 */
table.checkStatus(id)

示例

// 渲染
table.render({
  elem: '',
  id: 'test',
})

// 获取选中行相关数据
var tableStatus = table.checkStatus('test')
console.log(tableStatus.data) // 选中行的数据
console.log(tableStatus.data.length) // 选中行数量，可作为是否有选中行的条件
console.log(tableStatus.dataCache) // 选中的原始缓存数据，包含内部特定字段 --- 2.9.17+
console.log(tableStatus.isAll) // 表格是否全选

获取表格某行数据

table.renderData()

语法

/**
 * @brief: 重新渲染数据
 * @param {string} id table 渲染时的 id 属性值
 * @return {*}
 */
table.renderData(id)

说明：该方法用于重新渲染数据，一般在修改 table.cache 后使用。

示例

// 渲染
table.render({
  elem: '',
  id: 'test',
})

// 获取当前实例的数据缓存
var data = table.cache['test']
// 获取某行数据，并从 data 中移除该行
var item = data.splice(index, 1) // index 为当前行下标，一般可在事件中通过 obj.index 得到
// 将某行数据移动到另外某行
data.splice(newIndex, 0, item[0])
// 根据 table.cache 重新渲染数据
table.renderData('test')

table.reloadData()

语法

【版本】v2.7+

/**
 * @brief: 仅数据重载
 * tip1: 该方法用于对表格的数据重载，与数据无关的属性不会参与到重载中。因此若只是更新数据，该方法可大幅提升体验。
 * 参数：同 .reload() 参数
 * @return {*}
 */
table.reloadData(id, options, deep)

示例

// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性...
})

// 数据重载- 仅与数据相关的属性(options)能参与到重载中
table.reloadData('test', {
  where: {},
  height: 2000, // 高度
})

一个数据重载

table.reload()

语法

/**
 * @brief: 表格完全重载
 * @param {string} id table 渲染时 id 配置项的值。
 *  （tip: 是 render 时 id配置项 的值，不是dom容器的id属性。但可能两个 id 值完全相同。）
 * @param {object} options .render() 的配置项
 * @param {boolean} deep v2.6+，是否采用深度重载（即重载时始终携带初始时及上一次重载时的参数），默认 false。
 * @return {*}
 * 【说明】该方法用于对表格的视图和数据在内的全部重载，所有属性均会参与到重载中，对应的表格会有一个直观的刷新效果。
 */
table.reload(id, options, deep)

兼容

【拓展】v2.6 之前版本的 table.reload() 方法兼容说明

由于 2.6 之前的版本是采用深度重载，所以如果你之前应用了该机制，那么升级 Layui 时，需要通过以下任一方式进行相应的兼容性适配。

方法一：追加参数兼容

table.reload(id, optiosn, true)

方法二：方法重写兼容。

将以下代码放入你的公共 JS 代码中

var tableReload = table.reload
table.reload = function () {
  var args = []
  layui.each(arguments, function (index, item) {
    args.push(item)
  })
  args[2] === undefined && (args[2] = true)
  return tableReload.apply(null, args)
}

示例

// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'orderListTable',
  // 其它属性...
})

// 完整重载 - 所有配置项属性均可参与到重载中
table.reload('orderListTable', {
  where: {
    // 传递数据异步请求时携带的字段
    aaa: '111',
    bbb: '222',
    // ...
  },
  height: 1000, // 重设高度
})

表格数据重载

table.on()

语法

/**
 * @brief:
 * @param {string} event(filter) 是事件的特定结构。
 *    参数1：event {string} 为事件名，支持的事件见下面 “参数1“。
 *    参数2：filter {string} 即元素属性 lay-filter 对应的值。
 * @param {function} callback(obj)
 *    obj 在不同的监听中不同（详细见下）
 * @return {*}
 */
table.on('event(filter)', callback(obj))

参数 1

event

【event】是 layui 对表格添加的事件监听名称。

事件名称	描述
tool/tolDouble	单元格工具事件。可在该事件中实现行的更新与删除操作。
checkbox	复选框事件
toolbar	头部工具栏事件
sort	表头排序切换事件
colTool v2.8.8+	表头自定义元素工具事件
colResized v2.8+	列拖拽宽度后的事件
colToggled v2.8+	列筛选（显示或隐藏）后的事件
row/rowDouble	行单击 和 双击事件
rowContextmunu v2.8+	行右键菜单事件
eidt	单元格编辑事件
radio	单选框事件
pagebar v2.7+	尾部分页栏事件

event 为 tool：监听处理 表头 toolbar 配置的 单元格-工具栏按钮事件
tip: 低版本没有。具体不知道，2.4.5 版本肯定是没有的。

checkbox

【事件监听语法】

table.on('checkbox(test)', function(obj){})

【回调-obj参数】

某个返回：

{
  checked: true,
  config: { limint: 10. loading: true, cellMinWidth: 60, //... },
  data: { id: 10006, username: 'user-6', sex: '女', city: '城市-6', sign: '签名-6', ...},
  dataCache: { id: 10006, username: 'user-6', sex: '女', city: '城市-6', sign: '签名-6', ...},
  del: f(),
  getCol: f(),
  index: 6,
  setRowChecked: f(e),
  tr: C.fn.init {0:tr, length:1, prevObject: C.fn.init, selector: '.layui-table-body tr[data-index="6"]', ...},
  type:  "one",
  update: f(e,t),
}

解释：

• checked： 当前复选框是否选中；
• config：当前表格渲染配置项；
• data 当前行数据；
• index: 从0开始计数，当前点击复选的序列号；
• tr: 当前复选所在 tr 的 jq 元素；
• 其它属性：未知；

event 为 checkbox：监听复选框交互事件

toolbar

【事件】监听表格头部工具栏自定义事件。

event 为 toolbar

filter

元素属性 lay-filter 对应的值。

参数 2

callback(obj)

tip: 每个事件都不完全相同，见各详细事件中。