Layui事件监听的实现(表单和数据表格)


Posted in Javascript onOctober 17, 2019

一、表单的事件监听

先介绍一下几个属性的用法

1、lay-filter 事件过滤器

相当于选择器,layui的专属选择器

2、lay-verify 验证属性

属性值可以是 :required必填项, phone手机号,email邮箱,url网址,number数字,date日期,identity身份证。这个相当于正则判断,当然你也可以定义自己的正则,做一些复杂的判断,例如:

<input type="text" lay-verify="required">
  //这里写required就是必填项的意思,相反phone就是手机号,
  如果是多个判断可以这样:ay-verify="required|phone",手机号必填。

如果说我要复杂的判断怎么弄呢? 我们需要先 引用form模块

layui.use('form',function()
  {
    var form = layui.form;
    //自定义一个验证器
    form.verify({
      account:[
      '正则'
      ,'提示语句'
      ]
      ,pass:[
      '正则'
      ,'提示语句'
      ]
      
    });
    
  })

当我们,写完验证规则后,只需要把自己定义的名字,如上面的account写到lay-verify="account"里面就好了,那么对这个规则验证就弄完了。

3、lay-submit 绑定触发提交的元素

在input的submit按钮标签里,添加这么一个属性,那layui表单的验证效果才会出来。

4、form.on事件

form.on('event(lay-filter)',function(){
  
})

其中,event可以是radio,checkbox,submit等元素,其中的lay-filter就是我们加的事件过滤器属性值,比如:

<input type="submit" lay-filter="go" lay-submit value="提交"/>

对就是这个lay-filter=" "里面的值,好了就只需要这俩个属性,就可以执行我们相应的事件了。

二、表单事件监听

在开始介绍前,我们可以从这张图中,捋一捋思路。(自己画的,有点丑,嘿嘿)

Layui事件监听的实现(表单和数据表格)

好了好了,我们来解决问题!! 首先建立一个table标签

<table id="demo" lay-filter="table"></table>

1、表头工具栏

这个layui的表头工具栏是独立于表格的,是附加上去的,就是把一个盒子放到表格上面,这样通俗易懂了吧!

第一步,所以我们先建立一个盒子,但是这是一个特殊的盒子,我们需要对其隐藏

<div class="layui-hide layui-btn-group" id="toolbar">
  <button class="layui-btn " lay-event="getall">查看所选数据</button>
  <button class="layui-btn " lay-event="getnum">查看所选数量</button>
  <button class="layui-btn layui-btn-danger" lay-event="delall">批量删除</button>
</div>

思考问题

其中有三个属性需要注意,layui-hide隐藏属性,layui-btn-group组按钮,lay-event事件的名称。

如何去辨别我们的操作呢,就是对layui-event设置的不同的值,来进行不同的行为。

第二步,我们在表格模块里引入我们的头部盒子,然后监听事件,来看我们的代码吧!

layui.use('table',function(){
    var table = layui.table;
    table.render({
      elem:'#demo'//表格ID
      ,url:'数据接口'
      ,toolbar:'#toolbar'//开启头部栏,写入我们的盒子id
      ,cols[[…………]]
    });
  });

到此为止我们的表格渲染就完毕了,开始事件!

table.on('event(lay-filter)',function(obj){ 
  //这是格式,event有toolbar头部栏事件,tool行标签事件,edit编辑事件,等等,
  括号里的当然就是我们给表格设置的lay-filter属性啦!
  obj是这个表格里所有的数据,我们可以console.log(obj)来查看有哪些数据!!
  })

好了格式差不多介绍完了,开始接着上面的打

table.on('toolbar(table)',function(obj){//我给表格设置的lay-filter叫table
    var checkStatus = table.checkStatus('demo')//表格id,获取选中行
    //嘿嘿,到了这,我好像说复选框怎么打了,很简单的,{type:'checkbox',fixed:'left'},写到cols里
    switch(obj.event)//对lay-event的值,进行不同的判断
    {
      case 'getall':
         layer.msg(JSON.stringify(checkStatus.data));
        break;
      case 'getnum':
        layer.msg(JSON.stringify(checkStatus.data.length));
        break;
      case 'delall':
      //这是我自己打的一个批删,道理都差不多,遍历拿到id传到后台处理!
        var a = [];
            for (var i = 0; i < checkStatus.data.length; i++) {
              a.push(checkStatus.data[i].ProductID)
            }
            console.log(checkStatus)
            let strid = a.toString();
            let num = checkStatus.data.length;
            if (num != 0) {
              $.ajax({
                url: '/JD/ShopDelAll?strid=' + strid
                , type: 'Delete'
                , success: function (d) {
                  layer.msg("删除了" + num + "条数据");
                  location.href = '/JD/ShopList';
                }
              })
            }
            else {
              layer.msg("至少选择一个!")
            }
            break;
        break;
      
    }
    
  });

看完有没有觉得很简单啊,头部工具栏的事件就完了,对于行工具栏的事件还不简单吗? 举一反三啊!我推荐你不用看下面了,看看官方文档,自己去试试吧!当然了,不明白的还是可以看看下面的嘞!

2、表格的行工具栏

其实道理都差不多啦,也是把一个盒子附加到表格里,只不过是每行都有,所以把我们添加的代码,写道cols属性里就好了!!

创建一个盒子

<div class="layui-hide layui-btn-group" id="tool">
  <a class="layui-btn layui-btn-warm" lay-event="particulars">查看</a>
  <a class="layui-btn layui-btn-normal" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger" lay-event="delid">删除</a>
</div>

好了,好了,没什么特别介绍的,属性都一样!开始js代码

table.render({
        elem: ''
        , url: ''
        , cols: [[
        ………………
          { toolbar: '#tool', title: '操作' }
        ]]
      });

哎呦,省略了,省略了。

事件监听

这个就简单了哈,咋们前面获取选中状态是不是用了checkStats,对!!!

我们这里不用了,哈哈,直接obj.data就能获取数据

table.on('tool(table2)', function (obj) {
        switch (obj.event) {
          case 'particulars':
            location.href = "/JD/Particulars?productID=" + obj.data.ProductID;
            break;//获取id跳转到详情页
          case 'delid':
            $.ajax({
              url: '/JD/ShopDelAll?strid=' + obj.data.ProductID
              , type: 'Delete'
              , success: function (d) {
                obj.del();
                layer.msg("删除成功");
              }
            })
            break;//这是我的一个ajax删除方法了,记得删除后要有obj.del()哦,否则数据是不会更新的!
          case 'edit':
            layer.msg("功能暂未开放,你没有权限");
            //嘿嘿,修改和删除差不多啦
            break;
        }

好了,到这,基本的事件就完了,想什么行单机事件啊,行编辑事件啊,这些照猫画虎,自己看看文档就会了吧,都一样的道理

3、表格重载

赞不多,我就不写了,哈哈,其实挺简单的,大家要自己动脑去研究!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
浅谈Vue.set实际上是什么
Oct 17 #Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 #Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 #Javascript
Weex开发之地图篇的具体使用
Oct 16 #Javascript
WEEX环境搭建与入门详解
Oct 16 #Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 #Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 #Javascript
You might like
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python显示生日是星期几的方法
2015/05/27 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python爬豆瓣电影实例
2018/02/23 Python
python使用多进程的实例详解
2018/09/19 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
pandas按条件筛选数据的实现
2021/02/20 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
学生打架检讨书大全
2014/01/23 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
学校交通安全责任书
2014/08/25 职场文书
公司股东合作协议书
2014/09/14 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书