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

一、事件监控的形式

首先介绍几个属性的用法

1.层过滤器事件过滤器

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

2.通过层验证来验证属性

属性值可以是：必需的必需的，电话号码，电子邮件地址，网址，号码，日期，身份证。这相当于常规判断。当然，你也可以定义自己的规律性，做出一些复杂的判断，比如：

输入类型=' text ' lay-verify=' required '//这里，required表示必填，相反，phone是手机号码。如果有多个判断，可以是这样的：ay-verify='必选|电话'，手机号必选。如果我想要复杂的判断，我能做什么？我们需要首先引用表单模块

layui.use('form '，function(){ var form=layui . form；//自定义验证程序表单. verify({ account:['正则'，'提示语句']，pass3360 ['正则'，'提示语句']})；})当我们写完验证规则后，只需要在lay-verify='account '中写上自己定义的名字，比如上面的账号，就完成了这个规则的验证。

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

在输入的提交按钮标签中，添加这样一个属性，那么layui表单的验证效果就出来了。

4.表单. on事件

Form.on ('event (lay-filter)'，function () {})，其中event可以是单选、复选框、提交等元素，lay-filter是我们添加的事件过滤器的属性值，例如：

input type=' submit ' lay-filter=' go ' lay-submit value=' submit '/pair是这个lay-filter=' '中的值，所以我们只需要这两个属性来执行我们对应的事件。

二、表单事件监控

在开始介绍之前，我们可以先从这张图片中捋一下思路。(我自己画的，有点丑，呵呵)

好吧，好吧，我们来解决问题！首先，创建一个表格标签

表格标识='演示'图层过滤器='表格'/表格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-BTNlayui-BTN-dancer ' 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 '/table ID，url:' data interface '，toolbar 3360 ' # toolbar '//打开标题栏并写入我们的框ID，cols [[............});至此，我们的表格渲染完成。开始活动！

桌子。on ('event (lay-filter)'，function(obj){//这是格式。事件有工具栏标题事件、工具行标签事件、编辑编辑事件等。括号中的当然是我们为表设置的层过滤器属性！Obj是这个表中的所有数据。我们可以在控制台查看数据！})嗯，格式差不多介绍完了，然后开始上面的打字

Table.on ('toolbar (table)'，function(obj){//我为表设置的lay-filter叫做table var check status=table . check status(' demo ')//table id，得到选中的行//呵呵，在这里，我好像说一下如何打复选框，很简单。{type:' checkbox '，fixed:' left'}，用cols编写，switch(obj.event)//对lay-event { case ' get all ' : layer . msg(JSON . stringfy(check status . data))的值做出不同的判断；打破；case ' getnum ' : layer . msg(JSON . stringify(CheckStatus . data . length))；打破；案例‘delall’://这是我自己做的批量删除，原因类似。遍历后，我得到id，并发送到后台处理！var a=[]；for(var I=0；I CheckStatus . data . length；i ) { a.push(checkStatus.data[i])。product id)} console . log(CheckStatus)让strid=a . ToString()；let num=CheckStatus . data . length；if (num！=0) { $.ajax({ url: '/JD/ShopDelAll？Strid=' strid，type:' delete '，success 3360 function(d){ layer . msg(' num ' data deleted ')；location . href='/JD/shopilist '；} })} else {layer.msg('至少选择一个！)} break打破；} });看完你觉得很简单吗？头部工具栏中的事件完成，线条工具栏中的事件不简单？以此类推！推荐大家不用看下面，看看官方文件自己试试吧！当然，如果你不懂，还是可以看看下面的！

2.表格的行工具栏

事实上，真相几乎是一样的，表中附加了一个框，但每行只有一个，所以只需编写我们在cols属性中添加的代码！

创建一个盒子

div class=' layui-hide layui-BTN-group ' id=' tool ' A class=' layui-BTNlayui-BTN-温暖' lay-event=' particles ' view/A class=' layui-BTNlayui-BTN-normal ' lay-event=' edit ' modify/A class=' layui-BTNlayui-BTN-dancer ' lay-event=' delid ' delete/A/div OK，OK，没有什么特别要介绍的，属性都是一样的Start js代码

Table.render ({elem: ' '，url: ' '，cols: [[.................哎哟，省略了，省略了。

事件监督

很简单，是吧？你有没有使用checkStats来获得你面前的选中状态？太好了。

这里不需要了，哈哈，可以直接通过obj.data获取数据

table.on('tool(table2)'，function(obj){ switch(obj . event){ case ' details ' : location . href='/JD/details？ProducT id=' obj . data . ProducT id；打破；//获取id并跳转到详细信息页面案例' delid' : $。Ajax ({URL :'/JD/shop del all？strid=' obj.data.ProductID，type: 'Delete '，success:函数(d){ obj . del()；Layer.msg('已成功删除')；} })中断；//这是我的ajax删除方法之一。删除后记得要有obj.del()，否则数据不会更新！Case 'edit': layer.msg('该功能尚未打开，您没有权限')；//嘿，修改删除差点断；}嗯，等你到了这里，基本事件就结束了。你想做什么，独立事件，编辑事件，自己看文档。都一样。

3.使表格超载

如果赞不多，我就不写了。哈哈，其实挺简单的。每个人都应该开动脑筋去研究它们！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。