响应鼠标事件，可以左键快捷选择切换选项，可右键弹出菜单栏。

 
代码：
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5.   <title>SlickGrid example 7: Events</title>
  6.   <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  7.   <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
  8.   <link rel="stylesheet" href="examples.css" type="text/css"/>
  9.   <style>
  10.     .cell-title {
  11.       font-weight: bold;
  12.     }
  13.  
  14.     #contextMenu {
  15.       background: #e1efc7;
  16.       border: 1px solid gray;
  17.       padding: 2px;
  18.       display: inline-block;
  19.       min-width: 100px;
  20.       -moz-box-shadow: 2px 2px 2px silver;
  21.       -webkit-box-shadow: 2px 2px 2px silver;
  22.       z-index: 99999;
  23.     }
  24.  
  25.     #contextMenu li {
  26.       padding: 4px 4px 4px 14px;
  27.       list-style: none;
  28.       cursor: pointer;
  29.       background: url("../images/arrow_right_peppermint.png") no-repeat center left;
  30.     }
  31.  
  32.     #contextMenu li:hover {
  33.       background-color: white;
  34.     }
  35.   </style>
  36. </head>
  37. <body>
  38. <table width="100%">
  39.   <tr>
  40.     <td valign="top" width="50%">
  41.       <div id="myGrid" style="width:600px;height:500px;"></div>
  42.     </td>
  43.     <td valign="top">
  44.       <h2>Demonstrates:</h2>
  45.       <ul>
  46.         <li>handling events from the grid:</li>
  47.         <li>Right-click the row to open the context menu</li>
  48.         <li>Click the priority cell to toggle values</li>
  49.       </ul>
  50.     </td>
  51.   </tr>
  52. </table>
  53. <ul id="contextMenu" style="display:none;position:absolute">
  54.   <b>Set priority:</b>
  55.   <li data="Low">Low</li>
  56.   <li data="Medium">Medium</li>
  57.   <li data="High">High</li>
  58. </ul>
  59.  
  60. <script src="../lib/firebugx.js"></script>
  61.  
  62. <script src="../lib/jquery-1.7.min.js"></script>
  63. <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
  64. <script src="../lib/jquery.event.drag-2.0.min.js"></script>
  65.  
  66. <script src="../slick.core.js"></script>
  67. <script src="../slick.editors.js"></script>
  68. <script src="../slick.grid.js"></script>
  69.  
  70. <script>
  71.   var grid;
  72.   var data = [];
  73.   var columns = [
  74.     {id: "title", name: "Title", field: "title", width: 200, cssClass: "cell-title", editor: Slick.Editors.Text},
  75.     {id: "priority", name: "Priority", field: "priority", width: 80, selectable: false, resizable: false}
  76.   ];
  77.  
  78.   var options = {
  79.     editable: true,
  80.     enableAddRow: false,
  81.     enableCellNavigation: true,
  82.     asyncEditorLoading: false,
  83.     rowHeight: 30
  84.   };
  85.  
  86.   $(function () {
  87.     for (var i = 0; i < 100; i++) {
  88.       var d = (data[i] = {});
  89.       d["title"] = "Task " + i;
  90.       d["priority"] = "Medium";
  91.     }
  92.  
  93.     grid = new Slick.Grid("#myGrid", data, columns, options);
  94.  
  95.     grid.onContextMenu.subscribe(function (e) {
  96.       e.preventDefault();
  97.       var cell = grid.getCellFromEvent(e);
  98.       $("#contextMenu")
  99.           .data("row", cell.row)
  100.           .css("top", e.pageY)
  101.           .css("left", e.pageX)
  102.           .show();
  103.  
  104.       $("body").one("click", function () {
  105.         $("#contextMenu").hide();
  106.       });
  107.     });
  108.  
  109.     grid.onClick.subscribe(function (e) {
  110.       var cell = grid.getCellFromEvent(e);
  111.       if (grid.getColumns()[cell.cell].id == "priority") {
  112.         var states = { "Low": "Medium", "Medium": "High", "High": "Low" };
  113.         data[cell.row].priority = states[data[cell.row].priority];
  114.         grid.updateRow(cell.row);
  115.         e.stopPropagation();
  116.       }
  117.     });
  118.   });
  119.  
  120.   $("#contextMenu").click(function (e) {
  121.     if (!$(e.target).is("li")) {
  122.       return;
  123.     }
  124.  
  125.     var row = $(this).data("row");
  126.     data[row].priority = $(e.target).attr("data");
  127.     grid.updateRow(row);
  128.   });
  129. </script>
  130. </body>
  131. </html>

SlickGrid example 7:鼠标事件的更多相关文章

  1. 7.JAVA之GUI编程鼠标事件

    鼠标事件: 功能: 1.基本窗体功能实现 2.鼠标移动监听,当鼠标移动到按钮上时,触发打印事件. 3.按钮活动监听,当按钮活动时,触发打印事件. 4.按钮被单击时触发打印事件. 源码如下: impor ...

  2. 手持设备点击响应速度，鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

  3. css屏蔽元素的鼠标事件pointer-events

    // 屏蔽点击 $('body').css('pointer-events', 'none'); //恢复默认 $('body').css('pointer-events', 'auto');   用 ...

  4. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  5. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...

  6. winform/窗体鼠标事件编程中的几个问题

    1.进行.net窗体的开发,经常用到鼠标事件,如MouseDown/MouseUp/MouseMove/MouseClick等.可是有时候给控件添加鼠标事件,就是不响应,怎么办呢! 答案:1.控件是否 ...

  7. JQuery事件之鼠标事件

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. ():click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. $('p').click(function( ...

  8. SDL鼠标事件

    鼠标事件有这么多种,手柄的可以忽视,Sdl.SDL_KEYDOWN,Sdl.SDL_KEYUP,Sdl.SDL_MOUSEMOTION,Sdl.SDL_MOUSEBUTTONDOWN,Sdl.SDL_ ...

  9. c#全局鼠标事件以及鼠标事件模拟

    最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...

随机推荐

  1. Oracle忽略hint的几种情形

    1.hint有语法错误.拼写错误 2.hint无效.比如索引不存在.非等值查询使用hash hint等 3.多个hint之间自相矛盾 4.hint受到了查询转换的影响 5.hint受到了数据库保留字的 ...

  2. linux namespace note

    --------------------------------- from http://oldwiki.linux-vserver.org/Namespaces //开源不只是代码,还有思想 Na ...

  3. html 圆角边框

    <input style="border-radius: 10px;" type="submit" value="确认"> bo ...

  4. [原创]java WEB学习笔记44：Filter 简介，模型，创建，工作原理，相关API，过滤器的部署及映射的方式，Demo

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  5. USACO: Combination Lock

    长久不写算法题,这种简单题折腾了一下午... /* ID: yingzho2 LANG: C++ TASK: combo */ #include <iostream> #include & ...

  6. HDU 4513 吉哥系列故事——完美队形II（Manacher）

    Problem Description 吉哥又想出了一个新的完美队形游戏! 假设有n个人按顺序站在他的面前,他们的身高分别是h[1], h[2] ... h[n],吉哥希望从中挑出一些人,让这些人形成 ...

  7. Android中使用SurfaceView+MediaPlayer+自定义的MediaController实现自定义的视屏播放器

    效果图如下: (PS本来是要给大家穿gif动态图的,无奈太大了,没法上传) 功能实现:暂停,播放,快进,快退,全屏,退出全屏,等基本功能 实现的思路: 在主布局中放置一个SurfaceView,在Su ...

  8. opscenter dashboard排错

    系统环境 opscenter 5.2 centOS 6.6 cassandra 2.0.x 问题 opscenter上的dashboard监控cassandra集群一段时间(大约1天)后总会停止显示. ...

  9. 夺命雷公狗ThinkPHP项目之----企业网站16之文章列表页的完善（关联查询）

    我们栏目的所属栏目不能总是以数字来显示吧??这样的话,估计老板会让您直接卷铺盖滚蛋噢,嘻嘻... 所以我们需要对她进行关联查询,控制器代码如下所示: public function lists(){ ...

  10. OpenGL笔试题

    简述FrameBuffer,RenderBuffer,Depth Buffer,Framebuffer attachment,Stencil buffer的关系 简述利用OpenGL执行图像叠加(大P ...