Layui表格监听行单双击事件讲解


Posted in Javascript onNovember 14, 2019

在学MVC过程中,我们一般都是利用layui插件里的layui数据表格加载数据库中的数据,而layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单双击事件。

Layui表格监听行单双击事件讲解

如上图所示:因为这个数据表格用到了layui插件,因此在使用前要先引用layui插件里面的css文件以及js文件,然后在“$(function(){});”里面加载和初始化layui模块,否则会报错。page表示开启分页。limit表示指定每页显示的条数。limits表示每页条数的选择项,这里可以自己定义每页条数的选择项,初始化表格就看看监听行的单双击事件。

Layui表格监听行单双击事件讲解

如上图所示:是layui表格监听行的单击事件,这里是监听刚刚初始化的表格。获取到点击选中的行数据,我这里是根据供应商ID回填form表单数据的,所以要获取供应商ID,用post请求把获取到供应商ID传递到控制器中,在控制器中根据供应商ID查询对应的数据后再回填到form表单中,“loadDatatoForm”是一个方法表示回填form表单数据,但回填不了下拉框数据,所以还需要另一个方法回填。监听行的单击事件可以实现很多功能的。

Layui表格监听行单双击事件讲解

上图是监听行的单击事件的效果图,点击左边的某条数据就会回填右边的form表单,这就方便我们查看供应商的基本资料。监听行的单击事件就这样完成了。

Layui表格监听行单双击事件讲解

如上图所示:是layui表格监听行的双击事件,这里也是监听刚刚初始化的表格。双击获取到点击选中的行数据,我这里也是根据供应商ID回填另一个form表单数据的,所以要获取供应商ID,用post请求把获取到供应商ID传递到控制器中,在控制器中根据供应商ID查询对应的数据后再回填到form表单中,“loadDatatoForm”是一个方法表示回填form表单数据,但回填不了下拉框数据,所以还需要另一个方法回填。这里监听行的双击事件跟单击事件一样,也是回填form表单,所以请求的控制器代码是一样的。监听行的单击事件可以实现很多功能的。看看效果图,

Layui表格监听行单双击事件讲解

上图是监听行的双击事件的效果图,点击某条数据就会回填form表单的数据,这里是只需要回填供应商名称和供应商编号的,然后关闭模态框。监听行的双击事件就完成了。

以上这篇Layui表格监听行单双击事件讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
jQuery原生的动画效果
Jul 10 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
js中arguments对象的深入理解
May 14 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 #Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 #Javascript
layui写后台表格思路和赋值用法详解
Nov 14 #Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 #Javascript
layui 弹出层值回传解决方式
Nov 14 #Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 #Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 #Javascript
You might like
GD输出汉字的函数的分析
2006/10/09 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
python从sqlite读取并显示数据的方法
2015/05/08 Python
python实现八大排序算法(2)
2017/09/14 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
pip命令无法使用的解决方法
2018/06/12 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
求职者应聘的自我评价
2013/10/16 职场文书
大专生简历的自我评价
2013/11/26 职场文书
工作自我评价怎么写
2014/01/29 职场文书
工作时间上网检讨书
2014/02/03 职场文书
525心理活动总结
2014/07/04 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年党总支工作总结
2015/05/25 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python