这几天在学习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)的更多相关文章

  1. Layui事件监听(表单和数据表格)

    一.表单的事件监听 先介绍一下几个属性的用法 1.lay-filter 事件过滤器 相当于选择器,layui的专属选择器 2.lay-verify 验证属性 属性值可以是 :required必填项, ...

  2. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  3. java Gui编程 事件监听机制

    1.     GUI编程引言 以前的学习当中,我们都使用的是命令交互方式: 例如:在DOS命令行中通过javac java命令启动程序. 软件的交互的方式:   1. 命令交互方式    图书管理系统 ...

  4. js事件监听机制(事件捕获)

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  5. Java中用得比较顺手的事件监听

    第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...

  6. 4.JAVA之GUI编程事件监听机制

    事件监听机制的特点: 1.事件源 2.事件 3.监听器 4.事件处理 事件源:就是awt包或者swing包中的那些图形用户界面组件.(如:按钮) 事件:每一个事件源都有自己特点有的对应事件和共性事件. ...

  7. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  8. .NET事件监听机制的局限与扩展

    .NET中把“事件”看作一个基本的编程概念,并提供了非常优美的语法支持,对比如下C#和Java代码可以看出两种语言设计思想之间的差异. // C#someButton.Click += OnSomeB ...

  9. 让 select 的 option 标签支持事件监听(如复制操作)

    这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

随机推荐

  1. tp3.2 事务处理

    事务的机制通常被概括为“ACID”原则即原子性(A).稳定性(C).隔离性(I)和持久性(D).  原子性:构成事务的的所有操作必须是一个逻辑单元,要么全部执行,要么全部不执行.  稳定性:数据库在事 ...

  2. Oracle ADG搭建

    Oracle Active Data Guard搭建 一:安装 1.基础环境配置 1.1.开启强制日志记录 DG日志发送方式中ARCH进程和LGWR进程的ASYNC模式都是基于日志同步的,所以我们必须 ...

  3. Linux入门篇(一)——基本命令

    这一系列的Linux入门都是本人在<鸟哥的Linux私房菜>的基础上总结的基本内容,主要是记录下自己的学习过程,也方便大家简要的了解 Linux Distribution是Ubuntu而不 ...

  4. 谨慎修改Python的类属性

    Python的类和类实例都是可变对象,可以随时给属性赋值,并且在原处修改. 在对类属性进行修改时需要特别小心,因为所有的类实例都继承共享类属性,除非实例本身存在和类属性同名的属性.对类属性进行修改,会 ...

  5. Xp根据数据库insert获取微信聊天记录

    https://mp.weixin.qq.com/s?__biz=MzIzNDA3MDgwNA==&mid=2649230245&idx=1&sn=3746423a481976 ...

  6. php isset和empty方法的区别

    我总结了下面几点区别,直接上代码: empty方法: 变量不存在,返回true 变量存在,值为空,返回true 变量存在,值不为空,返回false function empty1(){ //变量不存在 ...

  7. nodejs 之 nvm和pm2

    说道 node不得不提到nodejs的版本管理nvm和Node应用的进程管理器pm2. 当然,关于这两个的介绍的文章那么多,随意baidu,bing,google就可以. 我这里是给自己打一个标签,方 ...

  8. python 常用算法

    算法就是为了解决某一个问题而采取的具体有效的操作步骤 算法的复杂度,表示代码的运行效率,用一个大写的O加括号来表示,比如O(1),O(n) 认为算法的复杂度是渐进的,即对于一个大小为n的输入,如果他的 ...

  9. JavaScript时间处理插件

    摘要:代码返回的有两种时间格式  一种是///  另外一种是---分割的 两个接收参数的说明 timestr  是接收的时间  mark是格式   默认返回的格式是///   加上-  返回的格式是- ...

  10. Appium python

    1.运行报错:FAILED_ALREADY_EXISTS: Attempt to re-install io.appium.android.ime without first uninstalling ...