Layui快速入门之第九节 表格事件的使用

目录

一：事件

二：头部工具栏事件

三：排序切换事件

 四：列拖拽宽度后的事件

五：列筛选（显示或隐藏）后的事件

六：行单击和双击事件

七：行右键菜单事件

 八：单元格编辑事件

九：单元格工具事件

十：复选框事件

十一：单选框事件

十二：尾部分页栏事件 

---

一：事件

table.on('event(filter)', callback);

• 参数 event(filter) 是事件的特定结构。 event 为事件名，支持的事件见下表。filter 为元素属性 lay-filter 对应的值。
• 参数 callback 为事件执行时的回调函数，并返回一个包含各项成员的 object 类型的参数。

event	描述
toolbar	头部工具栏事件
sort	排序切换事件
colResized 2.8+	列拖拽宽度后的事件
colToggled 2.8+	列筛选（显示或隐藏）后的事件
row / rowDouble	行单击和双击事件
rowContextmenu 2.8+	行右键菜单事件
edit	单元格编辑事件
tool	单元格工具事件。可在该事件中实现行的更新与删除操作。
checkbox	复选框事件
radio	单选框事件
pagebar 2.7+	尾部分页栏事件

二：头部工具栏事件

table.on('toolbar(filter)', callback);

点击头部工具栏区域设定了属性为 lay-event="" 的元素时触发。如：

三：排序切换事件

table.on('sort(filter)', callback);

          点击表头排序时触发，它通常在设置 autoSort: false 基础属性时使用，以呈现后端的排序，而不是默认的前端排序。

var table = layui.table;
 
// 禁用前端自动排序，以便由服务端直接返回排序好的数据
table.render({
  elem: '#test',
  autoSort: false, // 禁用前端自动排序。
  // … // 其他属性
});
 
// 触发排序事件 
table.on('sort(test)', function(obj){
  console.log(obj.field); // 当前排序的字段名
  console.log(obj.type); // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); // 当前排序的 th 对象
 
  // 尽管我们的 table 自带排序功能，但并没有请求服务端。
  // 有些时候，你可能需要根据当前排序的字段，重新向后端发送请求，从而实现服务端排序，如：
  table.reload('test', {
    initSort: obj, // 记录初始排序，如果不设的话，将无法标记表头的排序状态。
    where: { // 请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
      field: obj.field, // 排序字段
      order: obj.type // 排序方式
    }
  });
});

 四：列拖拽宽度后的事件

table.on('colResized(filter)', callback);

在表头列分割线拖拽宽度后触发。

var table = layui.table;
 
// 渲染
table.render({
  elem: '#test',
  // … // 其他属性
});
 
// 列拖拽宽度后的事件
table.on('colResized(test)', function(obj){
  var col = obj.col; // 获取当前列属性配置项
  var options = obj.config; // 获取当前表格基础属性配置项
  console.log(obj); // 查看对象所有成员
});

五：列筛选（显示或隐藏）后的事件

table.on('colToggled(filter)', callback);

点击头部工具栏右上角的字段筛选列表时触发。

var table = layui.table;
 
// 渲染
table.render({
  elem: '#test',
  // … // 其他属性
});
 
// 列筛选（显示或隐藏）后的事件
table.on('colToggled(test)', function(obj){
  var col = obj.col; // 获取当前列属性配置项
  var options = obj.config; // 获取当前表格基础属性配置项
  console.log(obj); // 查看对象所有成员
});

六：行单击和双击事件

• 行单击事件：table.on('row(filter)', callback);
• 行双击事件：table.on('rowDouble(filter)', callback);

单击或双击 table 行任意区域触发，两者用法相同。

var table = layui.table;
 
// 渲染
table.render({
  elem: '#test',
  // … // 其他属性
});
 
// 行单击事件
table.on('row(test)', function(obj){
  var data = obj.data; // 得到当前行数据
  var index = obj.index; // 得到当前行索引
  var tr = obj.tr; // 得到当前行  元素的 jQuery 对象
  var options = obj.config; // 获取当前表格基础属性配置项
  console.log(obj); // 查看对象所有成员
  
  // obj.del() // 删除当前行
  // obj.update(fields, related);  // 修改行数据
  // obj.setRowChecked(opts); // 设置行选中状态
});

七：行右键菜单事件

table.on('rowContextmenu(filter)', callback);

右键单击行时触发。

 八：单元格编辑事件

table.on('edit(filter)', callback);

单元格被编辑，且值发生改变时触发。

var table = layui.table;
var layer = layui.layer;
 
// 单元格编辑事件
table.on('edit(test)', function(obj){
  var field = obj.field; // 得到修改的字段
  var value = obj.value // 得到修改后的值
  var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
  var data = obj.data // 得到所在行所有键值
  var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增
  console.log(obj); // 查看对象所有成员
  
  // 值的校验
  if(value.replace(/\s/g, '') === ''){
    layer.tips('值不能为空', this, {tips: 1});
    return obj.reedit(); // 重新编辑 -- v2.8.0 新增
  }
  // 编辑后续操作，如提交更新请求，以完成真实的数据更新
  // …
  
  // 更新当前缓存数据
  var update = {};
  update[field] = value;
  obj.update(update, true); // 参数 true 为 v2.7 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图
});

九：单元格工具事件

• 单元格工具事件「单击触发」： table.on('tool(filter)', callback);
• 单元格工具事件「双击触发」： table.on('toolDouble(filter)', callback);

单击或双击单元格中带有 lay-event="" 属性的元素时触发。在表格主体的单元格中，经常需要进行很多的动态操作，比如编辑、删除等操作，这些均可以在单元格工具事件中完成。

十：复选框事件

able.on('checkbox(filter)', callback);

当 table 开启复选框，且点击复选框时触发。

var table = layui.table;
 
// 复选框事件
table.on('checkbox(test)', function(obj){
  console.log(obj); // 查看对象所有成员
  console.log(obj.checked); // 当前是否选中状态
  console.log(obj.data); // 选中行的相关数据
  console.log(obj.type); // 若触发的是全选，则为：all；若触发的是单选，则为：one
});

十一：单选框事件

table.on('radio(filter)', callback);

当 table 开启单选框，且点击单选框时触发。

var table = layui.table;
 
// 单选框事件
table.on('radio(test)', function(obj){
  console.log(obj); // 当前行的一些常用操作集合
  console.log(obj.checked); // 当前是否选中状态
  console.log(obj.data); // 选中行的相关数据
});

十二：尾部分页栏事件 

table.on('pagebar(filter)', callback);

点击尾部分页栏自定义模板中属性为 lay-event="" 的元素时触发。用法跟 toolbar 完全一致

var table = layui.table;
 
// 渲染
table.render({
  elem: '#demo',
  pagebar: '#pagebarDemo' // 分页栏模板所在的选择器
  // … // 其他参数
});
 
// 分页栏事件
table.on('pagebar(test)', function(obj){
  console.log(obj); // 查看对象所有成员
  console.log(obj.config); // 当前实例的配置信息
  console.log(obj.event); // 属性 lay-event 对应的值
});