layui框架学习(40:数据表格_主要事件)

  Layui数据表格模块主要通过各类事件响应工具栏操作、单元格编辑或点击等交互操作,本文学习table数据表格模块中的主要事件及处理方式。
  头部工具栏事件。通过代码“table.on(‘toolbar(test)’, function(obj))”获取lay-filter属性为test的数据表格的头部工具栏事件,头部工具栏是指在数据表格上方通过toolbar属性设置的工具栏,其中设置了lay-event属性的按钮或其它元素点击时会触发头部工具栏事件,在事件响应函数中的obj.event获取触发的具体事件名称,也即按钮或其它元素中lay-event属性设置的值,获取到具体事件后,就可以执行相应的操作了。设置并获取lay-event的示例代码及截图如下所示:

	<script type="text/html" id="toolbarDemo">
	  <div class="layui-btn-container">
	    <button class="layui-btn layui-btn-sm" lay-event="newdata">新增数据</button>
	    <button class="layui-btn layui-btn-sm" lay-event="insertdata">插入数据</button>
	    <button class="layui-btn layui-btn-sm" lay-event="deldata">删除数据</button>	     
	  </div>
	</script>
	<table id="demo" lay-filter="test"></table>
	<script>
		layui.use(['table','layer'], function(){
		  var table = layui.table;
		  var layer = layui.layer;
		  
		  table.render({
			elem: '#demo'				
			,url: 'http://localhost:5098/ECData/DataTableList' 
			,page: true
			,width:800
			,toolbar:"default"
			,title:"环境监测数据表格"
			,size:"sm"
			,totalRow:true				
			,defaultToolbar:["print","exports"]
			...
		  });
						
		  table.on('toolbar(test)',function(obj)
		  {
			  layer.alert(obj.event);	
		  })
		});
	</script>

在这里插入图片描述在这里插入图片描述
  单元格工具事件。通过代码“table.on(‘tool(test)’, function(obj))”获取lay-filter属性为test的数据表格的单元格工具事件,后者是指表格的单元格中设置了lay-event属性的按钮或其它元素触发的事件,获取到具体事件后,就可以对该行数据执行相应的操作。设置并获取lay-event的示例代码及截图如下所示:

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="newdata">新增数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="insertdata">插入数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="deldata">删除数据</button>	     
  </div>
</script>
<table id="demo" lay-filter="test"></table>
<script>
	layui.use(['table','layer'], function(){
	  var table = layui.table;
	  var layer = layui.layer;

	  table.render({
		elem: '#demo'				
		,url: 'http://localhost:5098/ECData/DataTableList'
		,page: true
		,width:1000
		,toolbar:"default"
		,title:"环境监测数据表格"
		,size:"sm"
		,totalRow:true				
		,defaultToolbar:["print","exports"]
		,cols: [[ 
		  {type:'radio'}				  
		  ,{field: 'id', title: 'ID',totalRowText: '合计'}
		  ,{field: 'createTime', title: '创建时间'}
		  ,{field: 'humidity', title: '湿度',sort:true,edit:'textarea',totalRow:true}
		  ,{field: 'temperature', title: '摄氏温度',sort:true,totalRow:true} 
		  ,{field: 'temperature', title: '华氏温度',sort:true,templet:function(d){ return d.temperature*9/5+32}} 
		  ,{field: 'flameValue', title: '火焰检测值',totalRow:true}
		  ,{field: 'mqValue', title: '烟雾检测值',templet:"#redalert"}
		  ,{templet:"#toolbarDemo"}
		]]
	  });
					
	  table.on('tool(test)',function(obj)
	  {
		  layer.alert('ID = '+obj.data.id+',event = '+obj.event);	
	  })
	});
</script>

在这里插入图片描述

  单选框事件。开启单选框列后,单击某行的单选框,会触发单选框事件,通过“table.on(‘radio(test)’, function(obj))”代码能够获取lay-filter属性为test的数据表格的单选框事件。获取单选框事件的示例代码及截图如下所示。测试过程中发现主要是通过点击单选框触发单选框事件,当已经选中某一行,再点击另一行的单选框时并不会触发checked为false的事件,而是触发的新行的单选框事件。

  table.on('radio(test)', function(obj)
  { 
	  layer.alert('ID = '+obj.data.id+',checked = '+obj.checked);			    
  });

在这里插入图片描述

  复选框事件。开启复选框列后,勾选或取消勾选某行的复选框,勾选或取消勾选全选框,都会触发复选框事件,通过“table.on(‘checkbox(test)’, function(obj))”代码能够获取lay-filter属性为test的数据表格的复选框事件。获取复选框事件的示例代码及截图如下所示。
在这里插入图片描述

// 勾选或取消勾选某行的复选框时,data为当前行值,type为one
// 勾选或取消勾选全选框时,data为空,type为all
table.on('checkbox(test)', function(obj)
{
   layer.alert('ID = '+obj.data.id+',checked = '+obj.checked+',type = '+obj.type);	
});

在这里插入图片描述
在这里插入图片描述

  单元格编辑事件。数据表格模块通过基础参数editTrigger设置单元格编辑的事件触发方式(还要搭配列参数中的edit属性),如果单元格被编辑且值有变化则会触发单元格编辑事件,通过“table.on(‘edit(test)’, function(obj))”代码能够响应单元格编辑事件,并通过回调函数获取相关信息,主要包括obj.value(修改后的值)、obj.field(单元格字段名)、obj.data(单元格所在行的所有相关数据),从浏览器的调试界面中可以看到,obj中还包括其它属性,如原始值、tr/td节点信息等。获取单元格编辑事件的示例代码及截图如下所示。
在这里插入图片描述

table.on('edit(test)', function(obj)
{
 layer.alert('ID = '+obj.data.id+',field = '+obj.field+',newValue = '+obj.value);
});

在这里插入图片描述
  行单击/双击事件。单击或双击行时会触发行单击/双击事件,通过代码“table.on(‘row(test)’, function(obj))”获取行单击事件,“table.on(‘rowDouble(test)’, function(obj))“获取行双击事件,通过obj.data获取当前行信息。获取单击/双击事件的示例代码及截图如下所示(不要两个事件同时处理,否则无法触发双击事件处理函数)。

  table.on('row(test)', function(obj)
  {
	  layer.alert('singleclick,ID = '+obj.data.id);
  });			   
  
  table.on('rowDouble(test)', function(obj)
  {
    layer.alert('doubleclick,ID = '+obj.data.id);
  });

在这里插入图片描述
在这里插入图片描述

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/100990.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL中日期、时间直接相减的坑

前言 在牛客网上写一道 SQL 题时&#xff0c;需要计算两个日期之间相隔的秒数&#xff0c;我在写的时候直接将两个日期进行相减&#xff0c;得出来的值却不是相差的秒数。 情景再现 我在 MySQL 中进行了测试&#xff0c;得出的结论是&#xff1a;如果日期类型直接相减&#…

LeetCode 面试题 02.04. 分割链表

文章目录 一、题目二、C# 题解 一、题目 给你一个链表的头节点 head 和一个特定值 x&#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你不需要 保留 每个分区中各节点的初始相对位置。 点击此处跳转题目。 示例 1&#…

【实操干货】如何开始用Qt Widgets编程?(四)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 在本文中&#xff0…

性能测试工具Jmeter你所不知道的东西····

谈到性能测试&#xff0c;大家一定会联想到Jmeter和LoadRunner,这两款工具目前在国内使用的相当广泛&#xff0c;主要原因是Jmeter是开源免费&#xff0c;LoadRunner 11在现网中存在破解版本。商用型性能测试工具对于中小型企业很难承担相关的费用。国内的性能测试工具有&#…

openGauss学习笔记-53 openGauss 高级特性-Ustore

文章目录 openGauss学习笔记-53 openGauss 高级特性-Ustore53.1 设计原理53.2 核心优势53.3 使用指导 openGauss学习笔记-53 openGauss 高级特性-Ustore Ustore 存储引擎&#xff0c;又名 In-place Update 存储引擎&#xff08;原地更新&#xff09;&#xff0c;是 openGauss …

JVM第二篇 类加载子系统

JVM主要包含两个模块&#xff0c;类加载子系统和执行引擎&#xff0c;本篇博客将类加载子系统做一下梳理总结。 目录 1. 类加载子系统功能 2. 类加载子系统执行过程 2.1 加载 2.2 链接 2.3 初始化 3. 类加载器分类 3.1 引导类加载器 3.2 自定义加载器 3.2.1 自定义加载器实…

关于两个不同数据库的两张表建立数据库链接,关联查询数据

一、数据库链接 数据库链接&#xff08;database link&#xff09;是用于跨不同数据库之间进行连接和数据传输的工具或方法。它允许在一个数据库中访问另一个数据库中的对象和数据。 二、具体操作 以Oracle数据库为例 --1.建立链接tjpt CREATE DATABASE LINK tjpt CONNECT…

python中super()用法

super关键字的用法 概述作用语法使用示例1.通过super() 来调用父类的__init__ 构造方法&#xff1a;2.通过supper() 来调用与子类同名的父类方法2.1 单继承2.2 多继承 概述 super() 是python 中调用父类&#xff08;超类&#xff09;的一种方法&#xff0c;在子类中可以通过su…

iOS开发Swift-3-UI与按钮Button-摇骰子App

1.创建新项目Dice 2.图标 删去AppIcon&#xff0c;将解压后的AppIcon.appiconset文件拖入Assets包。 3.将素材点数1-6通过网页制作成2x&#xff0c;3x版本并拖入Asset。 4.设置对应的UI。 5.拖入Button组件并设置style。 6.Ctrl加拖拽将Button拖拽到ViewController里&#xff0…

mysql 间隙锁原理深度详解

目录 一、前言 二、mysql之mvcc 2.1 什么是mvcc 2.2 mvcc组成 2.2.1 Undo log 多版本链 2.2.2 ReadView 2.2.3 快照读与当前读 三、RR级别下的事务问题 3.1 RR隔离级别解决的问题 3.1.1 幻读问题 3.2 幻读效果演示 3.2.1 准备测试表和数据 3.2.2 修改事务级别 3.…

机器学习实战之用 Scikit-Learn 正则化方法解决过拟合详解

你是不是在模型训练中遇到过这样的问题&#xff1a;在训练集上表现得极好&#xff0c;但在测试集上效果不佳&#xff1f;这就是过拟合的问题。 过拟合是模型在训练过程中学到了数据的“噪声”而非规律&#xff0c;导致在未知数据上表现不佳。那么怎么解决这个问题呢&#xff1…

java八股文面试[多线程]——阻塞队列

阻塞队列大纲&#xff1a; 什么是阻塞队列 阻塞队列&#xff1a;从名字可以看出&#xff0c;他也是队列的一种&#xff0c;那么他肯定是一个先进先出&#xff08;FIFO&#xff09;的数据结构。与普通队列不同的是&#xff0c;他支持两个附加操作&#xff0c;即阻塞添加和阻塞删…

excel 无法删除有合并单元格的列内容时的替代方法

背景&#xff1a; hp 笔记本电脑&#xff1b;win10 64位&#xff1b;excel 版本 16.0&#xff1b; office 2016自带excel 问题&#xff1a; 把pdf转excel后&#xff0c;由于原 pdf 图表本身的原因&#xff0c;转换后有不规则合并单元格的现象。 而在选择某列进行“删除” &a…

Open3D(C++) 点云格网分块

目录 一、算法概述二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法概述 点云格网分块是点云二维格网化的一个具体应用案例,与Open3D (C++) 使用点云创建数字高程模型DEM类似,对每个格…

Linux编程--进程--fork使用,创建父子进程

1.使用fork函数创建一个进程 #include <unistd.h>pid_t fork(void); 返回值为0&#xff0c;代表当前进程是子进程 返回值为非负数&#xff0c;代表当前进程为父进程 调用失败&#xff0c;返回-1 代码&#xff1a; #include <stdio.h> #include <sys/types.h&g…

PHP旅游管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 旅游管理系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 PHP 旅游管理系统 源码下载地址&#xff1a; https://download.csdn.net/download/qq_41…

鸿蒙系列-如何使用好 ArkUI 的 @Reusable?

如何使用好 ArkUI 的 Reusable&#xff1f; OpenHarmony 组件复用机制 在ArkUI中&#xff0c;UI显示的内容均为组件&#xff0c;由框架直接提供的称为 系统组件&#xff0c;由开发者定义的称为 自定义组件。 在进行 UI 界面开发时&#xff0c;通常不是简单的将系统组件进行组合…

python实现语音识别

1. 首先安装依赖库 pip install playsound # 该库用于播放音频文件 pip install speech_recognition # 该库用于语音识别 pip install PocketSphinx # 语音识别模块中只有sphinx支持离线的&#xff0c;使用该模块需单独安装 pip install pyttsx3 # 该库用于将文本转换为语音播…

自动化运维工具-----Ansible入门详解

目录 一.Ansible简介 什么是Ansible&#xff1f; Ansible的特点 Ansible的架构 二.Ansible任务执行解析 ansible任务执行模式 ansible执行流程 ansible命令执行过程 三.Ansible配置解析 ansible的安装方式 ansible的程序结构&#xff08;yum安装为例&#xff09; ansibl…

设计模式-5--适配器模式(Adapter Pattern)

一、什么是适配器模式&#xff08;Adapter Pattern&#xff09; 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许将一个类的接口转换成客户端所期望的另一个接口。适配器模式主要用于解决不兼容接口之间的问题&#xff0c;使得原本…