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样式设置 查了一些资料,姑且认为 ...
随机推荐
- java 多线程,T1 T2 T3 顺序执行
一.程序设计 1.抽象公共类PublicThread,具有先前线程属性previousThread.父类为Thread 2.在PublicThread的run()方法中判断previousThread ...
- unity创建和加载AssetBundle
先说一下为什么要使用AssetBundle吧,以前做东西一直忽略这个问题,现在认为这个步骤很重要,代码是次要的,决策和为什么这样搞才是关键. 一句话概括吧,AssetBundle实现了资源与服务分离, ...
- 响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)
最近遇到这种头疼的问题,百思不得其解,不耻下问,悬梁刺股这些事情都做过之后,终于看到希望,于是攒见好就收,感觉整理分享给大家,希望有所帮助. 对手机分辨率和网页像素的初步认识是,是2倍的差别. 但 ...
- Netty入门之客户端与服务端通信(二)
Netty入门之客户端与服务端通信(二) 一.简介 在上一篇博文中笔者写了关于Netty入门级的Hello World程序.书接上回,本博文是关于客户端与服务端的通信,感觉也没什么好说的了,直接上代码 ...
- Struts2下载
package com.tcf.action; import java.io.BufferedInputStream; import java.io.FileInputStream; import j ...
- css中的 nav ul li ul 与 nav>ul>li 这两种写法的区别
<nav> <ul id="a"> <li>a1</li> <li>a2</li> <li>a3 ...
- Nginx服务器配置之location语法分析
location基本语法:location [=|~|~*|^~] /uri/ { - } = 严格匹配.如果这个查询匹配,那么将停止搜索并立即处理此请求. ~ 为区分大小写匹配(可用正则表达式) ! ...
- 机器学习小记——KNN(K近邻) ^_^ (一)
为了让绝大多数人都可以看懂,所以我就用简单的话语来讲解机器学习每一个算法 第一次写ML的博文,所以可能会有些地方出错,欢迎各位大佬提出意见或错误 祝大家开心进步每一天- 博文代码全部为python 简 ...
- 建造者模式(Builder)-宏观的使用角度
建造者模式(Builder) 建造者模式是用来解决产品对象的创建过程是由多个零件组成的情况,这些零件与产品本身是组合关系,也就是部分与整体,这些零件的创建顺序,还有一些创建中的逻辑,都是稳定的,可以封 ...
- 为什么用CDN给你网站加速?
大多数人都知道,一个用户在打开一个新网站的时候,如果网站打开的速度过慢,用户是很难继续浏览的.因而很多网站的运营人员想方设法的提高网站的加载速度.我们也相信速度是一个成功网站的必备要素之一,速度不够快 ...