设置鼠标右键事件单击获取数据表格数据

开发工具与关键技术：Visual Studio ASP.NET MVC

作者：刘剑鸿

撰写时间：2019年07月26日 星期五

               设置鼠标右键事件单击获取数据表格数据

当我们想在网页上用表格表达数据时，layui是table模块是个很好的选择。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。

为了更方便运用数据，可以在在layui的数据表格行设置鼠标右键事件。想选择某行数据时就直接在该行数据上单击右键，就可以对该行进行操作。如图：

那么，在layui数据表格外，单击右键也会出现么？

不会，把鼠标右键设置在done的回调函数里，在数据表格外单击右键就不会显示了。接下里认识一下，使表行达到该效果的参数done。

无论是异步请求数据，还是直接赋值数据，都会触发该回调。都可以利用该回调做一些表格以外元素的渲染。我们就可以通过这样，设置它的条件，当满足条件时，使行的颜色改变。

Done的使用也很简单，

1. table.render({ //其它参数在此省略

2. done: function(res, curr, count){

3. //如果是异步请求数据方式，res即为你接口返回的信息。

4. //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度

5. console.log(res);

6. //得到当前页码

7. console.log(curr);

8. //得到数据总量

9. console.log(count);

10. }

11. });

绘制右键弹出的HTML的样式就省略掉了，不过它的CSS样式还是值得注意一下的：

.menus{

    display: none;

    position: absolute;

   width:175px; /*设置你需要的宽度*/

   height:230px; /*设置你需要的高度*/

   background:#fff;

   overflow:hidden;

   z-index:99;



 }

下面是JS的代码：

  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';

                                var y = e.originalEvent.y + 'px';

                                $("#menu").css({

                                    top: y,left: x

                                });

                                trdata = data[index];

                            }

                            if (e.which == 1) {

                         $("#menu").hide();    //如果是点击的鼠标左键，则隐藏菜单

                            }

                        });

                    });

                }

.layui-table-body
tr 是限制该范围的类，就是在这个类范围可以使用鼠标右键事件。

#menu 是鼠标右键弹出来html样式的ID