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 鼠标拖动图标技术
Feb 07 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
javascript实现文字跑马灯效果
Jun 18 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
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
社区平安建设汇报材料
2014/08/14 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
运动会主持词大全
2015/07/02 职场文书
房产遗嘱范本
2015/08/06 职场文书