layui之事件监听(table)
这几天在学习layui,感觉这框架挺好用的,前后端都适用,许多原本比较复杂的东西用该框架很容易就能实现。
今天看了table里的事件监听这个知识点。
语法:table.on('event(filter)', callback); 注:event为内置事件名,filter为容器lay-filter设定的值
默认情况下:事件所监听的是整个table模块容器,但如果只想监听某一个容器,使用事件过滤器即可
例如:我现在要监听复选框事件。刚开始怎么也实现不了预期的效果,都要崩溃了,后来发现原来是这样用的。附上表格的主要代码:
<table class="layui-table" lay-data="{id:'myTable'}" lay-filter="myTable">
<thead>
<tr>
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:'name',title:'姓名',align:'center'}"></th>
<th lay-data="{field:'sex',title:'性别',align:'center'}" ></th>
<th lay-data="{field:'age',title:'年龄',align:'center'}"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>张三</td>
<td>男</td>
<td>36</td>
</tr>
<tr>
<td></td>
<td>李四</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td></td>
<td>王五</td>
<td>男</td>
<td>42</td>
</tr>
</tbody>
</table>
呈现出来的效果是这样的。

绑定复选框事件,我们要加载依赖的table模块跟form模块。
然后是:
table.on('checkbox(myTable)',function(obj){ myTable为容器lay-filter设定的值
// 触发复选框后的回调函数
})
此时点击表格中的复选框,选中时就会触发复选框监听事件。我们可以在回调函数中打印出obj,会发现obj是一个对象,如我的是这样的

我点击的是张三这行的复选框,可以看到obj对象里面包含复选框是否选中、本行的内容等等。
layui之事件监听(table)的更多相关文章
- Layui事件监听(表单和数据表格)
一.表单的事件监听 先介绍一下几个属性的用法 1.lay-filter 事件过滤器 相当于选择器,layui的专属选择器 2.lay-verify 验证属性 属性值可以是 :required必填项, ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- java Gui编程 事件监听机制
1. GUI编程引言 以前的学习当中,我们都使用的是命令交互方式: 例如:在DOS命令行中通过javac java命令启动程序. 软件的交互的方式: 1. 命令交互方式 图书管理系统 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- Java中用得比较顺手的事件监听
第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...
- 4.JAVA之GUI编程事件监听机制
事件监听机制的特点: 1.事件源 2.事件 3.监听器 4.事件处理 事件源:就是awt包或者swing包中的那些图形用户界面组件.(如:按钮) 事件:每一个事件源都有自己特点有的对应事件和共性事件. ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- .NET事件监听机制的局限与扩展
.NET中把“事件”看作一个基本的编程概念,并提供了非常优美的语法支持,对比如下C#和Java代码可以看出两种语言设计思想之间的差异. // C#someButton.Click += OnSomeB ...
- 让 select 的 option 标签支持事件监听(如复制操作)
这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...
随机推荐
- vmstat 命令详解
作用:vmstat 的含义为显示虚拟内存状态(virtual memor statics),但是它可以报告关于进程,内存,I/O 等系统整体运行状态 选项: -a 显示活动内页 -f 显示启动后创建的 ...
- selenium爬取百度图片
一:简介 通过selenium模块,模拟火狐浏览器进行搜索下载操作. 二:脚本内容 # -*- coding:utf-8 -*- # 百度图片自动爬去 # Chrome浏览器类似,设置其options ...
- 解决mysql漏洞 Oracle MySQL Server远程安全漏洞(CVE-2015-0411)
有时候会检测到服务器有很多漏洞,而大部分漏洞都是由于服务的版本过低的原因,因为官网出现漏洞就会发布新版本来修复这个漏洞,所以一般情况下,我们只需要对相应的软件包进行升级到安全版本即可. 通过查阅官网信 ...
- Anti-pattern/反模式
常见的与"直觉"相背离的anti-pattern产生的实际原因是没有深入.全面地考虑问题,即只关注到自己关心的方面,忽略了其他重要的.起相反作用的因素. 所以这个"直 ...
- localStorage用法总结
这些知识是参考下面的朋友的.谢谢分享. http://www.jianshu.com/p/39ba41ead42e http://www.cnblogs.com/st-leslie/p/5617130 ...
- umask的作用[转]
umask的作用 umask 命令允许你设定文件创建时的缺省模式,对应每一类用户(文件属主.同组用户.其他用户)存在一个相应的umask值中的数字.对于文件来说,这一数字的最 大值分别是6.系统不允许 ...
- Netty之多用户的聊天室(三)
Netty之多用户的聊天室(三) 一.简单说明 笔者有意将Netty做成一个系列的文章,因为笔者并不是一个善于写文章的人,而且笔者学习很多技术一贯的习惯就是敲代码,很多东西敲着敲着就就熟了,然后再进行 ...
- [js高手之路] 我的开源javascript框架gdom - 选择器用法
gdom框架是我开发的一款dom和字符串处理框架,目前版本是1.0.0. 使用方法跟jquery是差不多的, 会用jquery就会用gdom,目前 1.0.0版本的选择器完全支持CSS3选择器.没有做 ...
- Wechat 微信端正确播放audio、video的姿势
在开发微信项目时,有在项目中播放音频(audio)和视频(video)的需求: 在开发中,我们会遇到的问题 audio.video在Android和IOS系统上的兼容性: video播放完成后,跳出浏 ...
- OpenCV探索之路(二):图像处理的基础知识点串烧
opencv图像初始化操作 #include<opencv2\opencv.hpp> #include<opencv2\highgui\highgui.hpp> using n ...