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 相关文章推荐
js实现简单登录功能的实例代码
Nov 09 Javascript
jquery $("#variable") 循环改变variable的值示例
Feb 23 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
vue.js学习之递归组件
Dec 13 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
浅析Vue实例以及生命周期
Aug 14 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
php加密解密字符串示例
2016/10/13 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
教师绩效工资方案
2014/02/01 职场文书
销售员岗位职责范本
2014/02/03 职场文书
狼和鹿教学反思
2014/02/05 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
个人租房协议书
2014/04/09 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
天气温馨提示语
2015/07/14 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers