鼠标右键对Layui每行表格数据进行操作
2018-08-24 09:36
656 查看
通过上次介绍的自定义鼠标右键拓展功能,对Layui数据表格中的每行数据进行操作
[code]layui.use(['table', 'layer'], function () { var table = layui.table, layer = layui.layer; table.render({ elem: '#filing_info_table', height: 'full-65', page: true, //开启分页 cols: [cols], data: data, done: function (res, curr, count) { var data = res.data; $('.layui-table-body tr').each(function (e) { //表单鼠标右键操作 $(this).mousedown(function (e) { var index = $(this).attr('data-index'); //获取该表格行的数据 if (e.which == 3) { //判断时鼠标右键按下 $("#menu").show(); //显示鼠标右键菜单列表 var x = e.originalEvent.x + 'px'; //获取鼠标位置x坐标 var y = e.originalEvent.y + 'px'; //获取鼠标位置y坐标 $("#menu").css({ top: y, //定位右键菜单的位置 left: x }); trdata = data[index]; //将该行的数据存放到自己定义的变量中 } if (e.which == 1) { $("#menu").hide(); //如果是点击的鼠标左键,则隐藏菜单 } }); }) } });
阅读更多
相关文章推荐
- 使用jq对表格数据进行操作
- python操作表格、txt文件、字典进行参数化(数据驱动)
- 对Excel2007表格进行读和写操作(按坐标),解决插入数据转换成数字格式
- 使用LayUI操作数据表格
- 从数据库取出数据在jsp页面上以表格形式呈现,并对表格数据进行分页打印操作。
- 关于layui数据表格的分页操作的学习笔记。
- 【初识Oracle】④数据库对表格数据进行操作(含三张练习用表)
- 使用LayUI操作数据表格
- datagridview右键菜单鼠标当前所在数据行进行选中,并在无数据时不显示右键菜单。
- C# winform datagridview中如何实现鼠标右键点击一行数据出现一个带有删除的菜单,并能执行删除操作?
- 使用LayUI操作数据表格
- angularjs中对表格数据进行增删改查操作详细
- DataGridView中使用BindSource进行数据绑定操作
- typescript(angular 2)中 对number类型的数据进行保留小数操作
- Java操作Hbase进行建表、删表以及对数据进行增删改查,条件查询
- 在Oracle的连接视图上进行数据更新操作
- jquery通过select列表选择框对表格数据进行过滤示例
- 使用Python与openpyxl进行表格处理(一)——读取数据
- 这是一个定时脚本,主要功能是遍历该文件夹下的所有文件并存储到数组,对数据中的文件进行操作,一个一个移动到指定的目录下,并删除原有文件
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据