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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
通过实例解析js简易模块加载器
Jun 17 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单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python Tkinter简单布局实例教程
2014/09/03 Python
python获取list下标及其值的简单方法
2016/09/12 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
PyTorch中permute的用法详解
2019/12/30 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
Pygame框架实现飞机大战
2020/08/07 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
酒店销售经理岗位职责
2015/04/02 职场文书
美丽的大脚观后感
2015/06/03 职场文书
岗位聘任协议书
2015/09/21 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL