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

2023-09-14 14:45:17

目录

一：事件

二：头部工具栏事件

三：排序切换事件

 四：列拖拽宽度后的事件

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

六：行单击和双击事件

七：行右键菜单事件

 八：单元格编辑事件

九：单元格工具事件

十：复选框事件

十一：单选框事件

十二：尾部分页栏事件 

一：事件

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 id="test" lay-filter="test"></table>
 
<!-- 工具栏模板 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
  </div>
</script>
 
<script>
layui.use(function(){
  var table = layui.table;
  // 渲染
  table.render({
    elem: '#test',
    toolbar: '#toolbarDemo',
    // … // 其他属性
  });
   
  // 头部工具栏事件
  table.on('toolbar(test)', function(obj){
    var options = obj.config; // 获取当前表格属性配置项
    var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
    console.log(obj); // 查看对象所有成员
    
    // 根据不同的事件名进行相应的操作
    switch(obj.event){ // 对应模板元素中的 lay-event 属性值
      case 'add':
        layer.msg('添加');
      break;
      case 'delete':
        layer.msg('删除');
      break;
      case 'update':
        layer.msg('编辑');
      break;
    };
  });
});
</script>

三：排序切换事件

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; // 得到当前行 <tr> 元素的 jQuery 对象
  var options = obj.config; // 获取当前表格基础属性配置项
  console.log(obj); // 查看对象所有成员
  
  // obj.del() // 删除当前行
  // obj.update(fields, related);  // 修改行数据
  // obj.setRowChecked(opts); // 设置行选中状态
});

七：行右键菜单事件

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

右键单击行时触发。

<table class="layui-hide" id="ID-table-onrowContextmenu"></table>
<script>
layui.use(['table', 'dropdown', 'util'], function(){
  var table = layui.table;
  var dropdown = layui.dropdown;
  var util = layui.util;
   
  // 渲染
  table.render({
    elem: '#ID-table-onrowContextmenu',
    defaultContextmenu: false, // 是否在 table 行中允许默认的右键菜单
    url: '/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    page: true,
    cols: [[
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true},
      {field:'username', title:'用户', width:120},
      {field:'sex', title:'性别', width:80},
      {field:'city', title:'城市', width:100},
      {field:'sign', title:'签名'},
      {field:'experience', title:'积分', width:80, sort: true}
    ]],
  });
   
  // 行单击事件
  table.on('rowContextmenu(ID-table-onrowContextmenu)', function(obj){
    var data = obj.data; // 得到当前行数据
    var index = obj.index; // 得到当前行索引
    var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
    var options = obj.config; // 获取当前表格基础属性配置项
    // console.log(obj); // 查看对象所有成员
    
    // 右键操作
    dropdown.render({
      trigger: 'contextmenu',
      show: true,
      data: [
        {title: 'Menu item 1', id: 'AAA'},
        {title: 'Menu item 2', id: 'BBB'}
      ],
      click: function(menuData, othis) {
        // 显示选中的相关数据 - 仅用于演示
        layer.alert(util.escape(JSON.stringify({
          dropdown: menuData,
          table: obj.data
        })));
      }
    });
    
    // obj.del() // 删除当前行
    // obj.update(fields, related);  // 修改行数据
    obj.setRowChecked({selectedStyle: true}); // 标注行选中状态样式
  });
});
</script>

 八：单元格编辑事件

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="" 属性的元素时触发。在表格主体的单元格中，经常需要进行很多的动态操作，比如编辑、删除等操作，这些均可以在单元格工具事件中完成。

<!-- 表头某列 templet 属性指向的模板 -->
<script type="text/html" id="toolEventDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
  <!-- 支持任意的 laytpl 组件语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>
 
<table id="test" lay-filter="test"></table> 
 
<script>
layui.use(function(){
  var table = layui.table;
  // 渲染
  table.render({
    elem: '#test'
    ,cols: [[
      {title: '操作', width: 200, templet: '#toolEventDemo'}
    ]]
    // … // 其他属性
  });
  // 单元格工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data; // 得到当前行数据
    var index = obj.index; // 得到当前行索引
    var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
    var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
    var options = obj.config; // 获取当前表格基础属性配置项
    console.log(obj); // 查看对象所有成员
    
    // 根据 lay-event 的值执行不同操作
    if(layEvent === 'detail'){ //查看
      // do somehing
    } else if(layEvent === 'del'){ //删除
      layer.confirm('确定删除吗？', function(index){
        obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
        layer.close(index);
        
        // 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
        /*
        table.reloadData(id, {
          scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
        });
        */
      });
    } else if(layEvent === 'edit'){ //编辑
      // do something
      
      // 同步更新缓存对应的值
      // 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。
      obj.update({
        username: '123',
        title: 'abc'
      }); 
      // 若需更新其他包含自定义模板并可能存在关联的列视图，可在第二个参数传入 true
      obj.update({
        username: '123'
      }, true); // 注：参数二传入 true 功能为 v2.7.4 新增
   
      // 当发送后端请求成功后，可再通过 reloadData 方法完成数据重载
      /*
      table.reloadData(id, {
        scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
      });
      */
    }
  });
});
</script>

十：复选框事件

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 对应的值
});
更多推荐

Nginx环境搭建、负载均衡测试

Nginx环境搭建、负载均衡测试系统环境：win10，IDEA2020，JDK8一、nginx环境搭建1.ngxin下载Nginx官网下载：http://nginx.org/en/download.htmlNginx有三种版本，分别是Mainlineversion（开发版）、Stableversion（稳定版）、Leg

学习vue3源码

🎬岸边的风：个人主页🔥个人专栏:《VUE》《javaScript》⛺️生活的理想，就是为了理想的生活!目录1.为什么要学习源码阅读优秀的代码的目的是让我们能够写出优秀的代码不给自己设限，不要让你周围人的技术上限成为你的上限功利性的阅读源码2.源码应该怎么阅读单点突破系统阅读具体方案3.本地怎么调试源码最后1.为什么

【微信小程序开发】宠物预约医疗项目实战-注册实现

【微信小程序开发】宠物预约医疗项目实战-注册实现第二章宠物预约医疗项目实战-注册实现文章目录【微信小程序开发】宠物预约医疗项目实战-注册实现前言一、打开项目文件二、编写wxss代码2.1什么是wxss2.2配置主程序全局样式三.在sign文件下的wxml文件中编写如下代码并保存四.sign.js文件代码编写如下4.1j

【Redis】深入探索 Redis 的数据类型 —— 无序集合 Set

文章目录一、Set类型介绍二、Set类型相关命令2.1添加元素和检查成员2.2移除元素2.3集合运算求交集求并集求差集2.4Set相关命令总结三、Set类型编码方式四、Set使用场景一、Set类型介绍Set（集合）是Redis数据库中的一种数据类型，它是一种无序的、不重复的数据结构，用于存储一组唯一的元素。Set在Re

【PyTorch 攻略 （4/7）】张量和梯度函数

一、说明W在训练神经网络时，最常用的算法是反向传播。在该算法中，参数（模型权重）根据损失函数相对于给定参数的梯度进行调整。损失函数计算神经网络产生的预期输出和实际输出之间的差异。目标是获得尽可能接近零的损失函数的结果。反向传播算法通过神经网络向后遍历，以调整权重和偏差以重新训练模型。这种随着时间的推移重新训练模型的来回

Word2Vec的原理是什么，如何用训练Word2Vec

Word2Vec是一种基于神经网络的词向量生成模型，通过训练预测上下文单词或中心单词来生成词向量。它包含两种不同的架构：跳字模型（Skip-gram）和连续词袋模型（ContinuousBag-of-Words,CBOW），它们在训练方式和结果表现上略有不同。1跳字模型（Skip-gram）：在跳字模型中，模型的目标是

ES7新特性深度解析：提升JavaScript开发效率的利器

前言ES7（ECMAScript2016）是JavaScript的最新版本，引入了一些强大的新特性，旨在提升开发者的工作效率。本篇博客将深度解析ES7的一些重要特性，并且以不超过50%的代码比例展示其用法。包含属性初始化器的类(Class)定义ES7允许我们在类的定义中直接初始化属性，而不需要在constructor中

Docker镜像：构建、推送和创建多个容器实例

文章目录步骤1：构建自定义Docker镜像步骤2：推送和拉取Docker镜像步骤3：创建多个容器实例结论🎈个人主页：程序员小侯🎐CSDN新晋作者🎉欢迎👍点赞✍评论⭐收藏✨收录专栏：云计算✨文章内容：Docker镜像🤝希望作者的文章能对你有所帮助，有不足的地方请在评论区留言指正，大家一起学习交流！🤗Docke

PX4自动控制中常用的几个话题

订阅话题1、/mavros/state订阅/发布：订阅功能：订阅mavros的一些状态数据，如连接状态、是否解锁、当前无人机模式数据类型：mavros_msgs/StatestringMODE_PX4_MANUAL=MANUALstringMODE_PX4_ACRO=ACROstringMODE_PX4_ALTITUD

处理SQLSyntaxErrorException异常：数据库表 ‘books‘ 不存在；

目录背景介绍我的问题中的解决方法通用方法背景介绍今天遇见了这个问题，解决后发出来分享一下Java应用程序中的SQLSyntaxErrorException：表'bookmanagement.books'不存在问题解决解决MySQL错误：无法找到表'bookmanagement.booksjava.sql.SQLSynt

从数据、产品、管理的视角探讨MES管理系统

MES生产管理系统在企业生产中扮演着关键角色，它集成了生产流程、数据应用、管理功能等多方面要素，为企业提供全面的生产运营支持。本文将从数据的视角聊聊MES管理系统，介绍其在数据管理、分析和利用方面的应用；从产品的视角，剖析其在生产过程管理、质量控制和追溯能力等方面的功能；最后从管理的视角，阐述其在生产调度、资源管理和决

热文推荐
  1. Spring后处理器-BeanPostProcessor

    Spring后处理器-BeanPostProcessorBean被实例化后，到最终缓存到名为singletonObjects单例池之前，中间会经过bean的初始化过程（（该后处理器的执行时机）），例如：属性的填充、初始化方法init的执行等，其中有一个对外拓展的点BeanPostProcessor，我们称之为bean后

  2. 2D游戏开发和3D游戏开发有什么不同？

    2D游戏开发和3D游戏开发是两种不同类型的游戏制作方法，它们之间有一些显著的区别：1.图形和视觉效果：2D游戏开发：2D游戏通常使用二维图形，游戏世界和角色通常在一个平面上显示。这种类型的游戏具有平面的外观，就像经典的平台游戏，如《超级马里奥》或《糖果传奇》。3D游戏开发：3D游戏使用三维图形，玩家可以在三维环境中自由

  3. MySQL学习系列（3）-每天学习10个知识

    目录1.全文搜索（Full-TextSearch）vs.LIKE操作符2.MySQL中的大数据量处理3.分区（Partitioning）在MySQL中的作用和用法4.MySQL中的数据复制（Replication）5.索引的覆盖和索引下推6.预处理语句（PreparedStatements）7.视图和存储过程8.MyS

  4. C语言知识阶段性总结项目：电子词典

    项目需求使用TCP实现客户端和服务端通信使用sqlite存放用户信息客户端需要有登录、注册、查询单词、账号查询记录功能服务器需要实时显示在线用户解决方案使用sqlite创建三个数据库，分别存放用户账号密码，单词表，用户查询记录使用链表存放在线用户的信息，在子线程中循环遍历，达到实时显示在线用户的效果主要的功能代码头文件

  5. 大数据(九)：数据可视化(一)

    专栏介绍结合自身经验和内部资料总结的Python教程，每天3-5章，最短1个月就能全方位的完成Python的学习并进行实战开发，学完了定能成为大佬！加油吧！卷起来！全部文章请访问专栏：《Python全栈教程（0基础）》再推荐一下最近热更的：《大厂测试高频面试题详解》该专栏对近年高频测试相关面试题做详细解答，结合自己多年

  6. Mysql---第六篇

    系列文章目录文章目录系列文章目录一、分表后非sharding_key的查询怎么处理，分表后的排序？二、mysql主从同步原理一、分表后非sharding_key的查询怎么处理，分表后的排序？可以做一个mapping表，比如这时候商家要查询订单列表怎么办呢？不带user_id查询的话你总不能扫全表吧？所以我们可以做一个映

  7. SBCS、DBCS、ASCII、MBCS(ANSI)、Unicode

    1.三种编码方式和三种字符类型。第一种编码方式是单字节字符集，称之为SBCS，它的所有字符可用一个字节存储。ASCII码就是SBCS。SBCS字符串由一个零字节结尾。第二种编码方式是多字节字符集，称之为MBCS，它包含的字符中有单字节长的字符，也有多字节长的字符。Windows用到的MBCS只有二种字符类型，单字节字符

  8. 沉积物微体古生物鉴定

    声明本文是学习GB-T42629.4-2023国际海底区域和公海环境调查规程第4部分：海洋沉积物物理特性调查.而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们1范围本文件规定了国际海底区域和公海环境调查中的沉积物组成、物理力学性质、生物扰动、沉积物通量等调查要素，及其调查过程中的样品采集、处理、测试

  9. 探讨基于IEC61499开发类似LabVIEW图形编程工具

    LabVIEW是一个十分出名的图形化编程工具，与之类似的还有Matlab的Simulink，他们统称为图形化编程语言（GraphicalProgrammingLanguage），另一方面，IEC61499功能块标准也是一种图形化编程工具，它面向分布式工业控制系统。本篇博文讨论一个十分有趣的话题，如何使用IEC61499