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中 关于prototype属性实现继承的原理图
Apr 16 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
js图片轮播插件的封装
Jul 21 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
JS实现打砖块游戏
Feb 14 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
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
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
Vue常用的几个指令附完整案例
2018/11/06 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
js简单的分页器插件代码实例
2019/09/11 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
环境科学专业个人求职的自我评价
2013/11/28 职场文书
实习心得体会
2014/01/02 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
航班延误投诉信
2015/07/02 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
Redis 限流器
2022/05/15 Redis
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android