admin 管理员组文章数量: 886993
layui表格 监听鼠标右键的心得
之前看过一篇文章 ,在这里 我把他贴出来
原文链接：
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(); //如果是点击的鼠标左键，则隐藏菜单}});})}
});
虽然这个代码可以初步的让你实现监听鼠标右键,并且获取到当前行的数据, 但是在实际运用的过程中我发现他的代码有一些问题没有注意到,就是在我们点击layui 表格表头进行排序的时候, 鼠标右键就失效了,经过一番查阅 我看到layui 有一个监听表格排序的事件就是下面这个
//监听排序事件
table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"console.log(obj.field); //当前排序的字段名console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）console.log(this); //当前排序的 th 对象//尽管我们的 table 自带排序功能，但并没有请求服务端。//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：table.reload('idTest', {initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）field: obj.field //排序字段,order: obj.type //排序方式}});layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});
将这段代码加到你的layui初始函数里面, 鼠标右键就又可以生效了,
但是 这里会出现一个很严重的BUG,就是你鼠标右键获取的值并不是你当前行的值,所以解决方法就是
在获取表格数据的哪里加下面一段代码
$(this).addClass('layui-table-click').siblings().removeClass('layui-table-click');
就是选中当前行的意思
然后获取的时候按选中的行来获取数据就OK了
本文标签： layui表格 监听鼠标右键的心得
版权声明：本文标题：layui表格 监听鼠标右键的心得 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732351996h1533347.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论