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样式设置 查了一些资料,姑且认为 ...
随机推荐
- SpringMVC底层数据传输校验的方案
团队的项目正常运行了很久,但近期偶尔会出现BUG.目前观察到的有两种场景:一是大批量提交业务请求,二是生成批量导出文件.出错后,再执行一次就又正常了. 经过跟踪日志,发现是在Server之间进行jso ...
- 通过 备份文件 恢复/迁移 gitlab
=============================================== 2017/10/20_第1次修改 ccb_warlock = ...
- python logging一个通用的使用模板
import os import logbook from logbook.more import ColorizedStderrHandler from functools import wraps ...
- docker:(1)docker基本命令使用及发布镜像
docker镜像可以完全看作一台全新的电脑使用,无论什么镜像都是对某一东西进行了配置,然后打包后可以快速移植到需要的地方直接使用 省去复杂的配置工作 比如java web项目部署,如果是新部署,需要装 ...
- 【原创】java NIO FileChannel 学习笔记 FileChannel 简介
java NIO 中FileChannel 的实现类是 FileChannelImpl,FileChannel本身是一个抽象类. 先介绍FileChannel File Channels 是线程安全 ...
- (转)mysql 无法设置外键的原因总结
在Mysql中创建外键时,经常会遇到问题而失败,这是因为Mysql中还有很多细节需要我们去留意,我自己总结并查阅资料后列出了以下几种常见原因. 1. 两个字段的类型或者大小不严格匹配.例如,如果一个 ...
- Mysql:执行source sql脚本时,出现:error 2
Centos下部署mysql: 1.yum -y install mysql*; 2.service mysqld start; 3.chkconfig mysqld on; 4.设置用户名和密码:m ...
- adb 获取Android手机信息命令(1)
@set version=1.7.2Normal @echo ============================================================= @echo I ...
- 关于 for 循环与 循环嵌套
FOR循环精讲 > 1.初步结识 for是写出题的重要组成部分之一,每个题如果没有for循环根本是无法做出来的,可见for循环在c++语言中是有多么重要,那么for的格式是怎样的呢?? for( ...
- K:树、二叉树与森林之间的转换及其相关代码实现
相关介绍: 二叉树是树的一种特殊形态,在二叉树中一个节点至多有左.右两个子节点,而在树中一个节点可以包含任意数目的子节点,对于森林,其是多棵树所组成的一个整体,树与树之间彼此相互独立,互不干扰,但其 ...