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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
javascript 自动转到命名锚记
Jan 10 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
js实现div弹出层的方法
Nov 20 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
javascript操作cookie
Jan 17 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
javascript少儿编程关于返回值的函数内容
May 27 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php数组合并的二种方法
2014/03/21 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
python中Mako库实例用法
2020/12/31 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
企划经理的岗位职责
2013/11/17 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
培训演讲稿范文
2014/01/12 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
高中学生评语大全
2014/04/25 职场文书
民主生活会剖析材料
2014/09/30 职场文书
神龙架导游词
2015/02/11 职场文书
干部培训简讯
2015/07/20 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android