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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
Webpack的dll功能使用
Jun 28 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
原生js实现五子棋游戏
May 28 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
虫族 ZERG 概述
2020/03/14 星际争霸
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
使用原生js写的一个简单slider
2014/04/29 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python3.5安装python3-tk详解
2019/04/26 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Python实现FM算法解析
2019/06/18 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
优秀社区干部事迹材料
2014/02/03 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
给学校的建议书范文
2014/05/15 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书