最近的一个项目前台使用的EasyUI，每个界面都有DataGrid控件，按照我们的想法，应该做出来的效果是单击选中，双击可编辑，当然右键也应该出现这些菜单按钮，想的挺好，那么该如何实现呢？一开始不知道如何下手，查了一些资料，也走了很多弯路，主要是查到代码以后不知道写在哪里。。导致弄了一天也没有做出来，后来换了一个思路，终于完成了。

首先建一个DataGrid的表格，我是在EasyUI官网上的Demo里面找的行编辑的代码来用，效果如下，单击可以进行行编辑，不过这不是咱们需要的主要功能，咱们需要的知识这个DataGrid控件及其数据：

有了数据，咱们就可以添加右键的代码了，代码很简单，放到<body></body>里面就可以，如下：

附上代码：

<span style="font-family:KaiTi_GB2312;font-size:24px;"><div style="margin: 20px 0;" id="mm" class="easyui-menu" data-options="onClick:menuHandler">

        <div data-options="name:'add'" onclick="append()">Add</div>

@*        <div data-options="name:'edit',iconCls:'icon-save'" onclick="onClickCell(index, field)">Edit</div>*@

        <div data-options="name:'save',iconCls:'icon-save'" onclick="accept()">Save</div>

        <div data-options="name:'remove',iconCls:'icon-print'" onclick="removeit()">Remove</div>

        <div class="menu-sep"></div>

        <div data-options="name:'exit'">Exit</div>

        <script>

            function menuHandler(item) {

                $('#log').prepend('<p>Click Item: ' + item.name + '</p>');

            }

            $(function () {

                $(document).bind('contextmenu', function (e) {

                    e.preventDefault();

                    $('#mm').menu('show', {

                        left: e.pageX,

                        top: e.pageY

                    });

                });

            });

        </script>

    </div></span>

加入这段代码以后，就可以做到如下效果：

右键的功能实现以后，如何使右键的添加/删除/修改等功能真正可以使用呢？因为本来就写了这些方法，所以，只要在右键菜单的onclick事件添加这些事件名称就可以了。

很多功能一开始不知道如何下手，但是只要开始做了，总会离自己要的效果越来越接近，去做，才最重要！

Datagrid添加右键菜单 标签： 三层EasyUI 2015-08-14 19:57 1029人阅读 评论(22)的更多相关文章

  1. [运维]Dell R710 raid配置 标签： raid运维 2017-04-15 19:35 581人阅读 评论(16)

    Dell R系列的一些服务器,raid的配置都大同小异,公司大部分的服务器,都是Dell R710型号的,这个型号的raid界面配置起来还是很简单的,下面来跟随小编体验一下raid如何配置吧.ps:图 ...

  2. EasyUI - DataGrid 去右边空白滚动条列 分类： JavaScript 2014-09-03 10:46 1090人阅读 评论(2) 收藏

    熟悉 EasyUI - DataGrid 的童鞋应该会注意到这样一个情景: 想去掉这块,找了下资料,发现也有人同样纠结:http://www.cnblogs.com/hantianwei/p/3440 ...

  3. JqueryEasyUI 解决IE下datagrid无法刷新的问题 分类： JavaScript JqueryEasyUI 2014-09-20 10:05 510人阅读 评论(1) 收藏

    问题描述: 在使用JqueryEasyUI 时,发现在IE下$('#table').datagrid('reload');无效,数据并没有被刷新,究其原因,是因为刷新时,datagrid请求的url没 ...

  4. 数字图像处理：基于MATLAB的车牌识别项目 标签： 图像处理matlab算法 2017-06-24 09:17 98人阅读 评论(0)

    学过了数字图像处理,就进行一个综合性强的小项目来巩固一下知识吧.前阵子编写调试了一套基于MATLAB的车牌识别的项目的代码.今天又重新改进了一下代码,识别的效果好一点了,也精简了一些代码.这里没有使用 ...

  5. linux 用户切换 标签： linux 2016-07-30 13:57 144人阅读 评论(0) 收藏

    一.指令修改 1.普通用户切换到root用户: su root 需要输入密码 2.root用户切换到普通用户: su 用户名 不需要输入密码 二.直接注销,再用新用户登录 注:1.两种方式存在差别,用 ...

  6. [运维]VMware vSphere介绍 标签： 运维 2017-04-21 19:48 532人阅读 评论(17)

    大部分的程序员,应该是使用过vmware workstation的,我们用这款软件来创建虚拟机,满足我们学习或者工作的一些问题,今天介绍的是vmware家的另一款,不算是软件,比软件范围更大,VMwa ...

  7. [ITOO]动态建库 标签： 库数据库mysql 2016-07-17 21:23 241人阅读 评论(2) 收

    最近一直在做权限系统的动态建库,动态建库,说白了就是在你点击"注册"按钮的时候,根据你输入的信息,来创建一个企业所需要的数据库的过程,因为现阶段并没有提供购买等功能,所以暂时咱们是 ...

  8. C#总结 标签： c# 2014-12-07 19:07 1148人阅读 评论(47) 收藏

    之前考二级的时候,C++没有好好的学,如今到了学C#的时候,又重新明白了一遍出来混,迟早要还得道理,我觉得,其实C#比C++简单,应该是因为之前没有好好学得原因,其实现在学C#,也是和一年前一样,照着 ...

  9. 【uml】之类图中的关系 标签： uml图形类 2014-11-29 09:02 1198人阅读 评论(23)

    uml早就画完了图,但是自己迟迟没有总结,因为总觉的自己把握的不到位,虽然现在也还是不到位,废话少说,上篇博客总结了用例图中的几种关系,这篇就讨论一下类图中的几种关系. 在uml的所有图中,就我目前的 ...

随机推荐

  1. AC自动机（模板） LUOGU P3808

    传送门 解题思路 AC自动机,是解决多模匹配问题的算法,是字典树与kmp结合的算法,可以解决许多子串在文本串中出现的次数等信息.关键是实现一个fail指针,是指向更靠上的前缀相同字母,从而可以实现在文 ...

  2. 使用setTimeout函数解决栈溢出问题

    下面的代码,如果队列太长会导致栈溢出,怎样解决这个问题并且依然保持循环部分: var list = readHugeList(); var nextListItem = function() { va ...

  3. poj1160 动态规划

    #include<stdio.h> #include<string.h> #define INF 999999999 #define Min(x,y) (x<y?x:y) ...

  4. JDBC 操作数据库实例

    JDBC是什么 JDBC代表Java数据库连接(Java Database Connectivity),它是用于Java编程语言和数据库之间的数据库无关连接的标准Java API,换句话说:JDBC是 ...

  5. js控制“鼠标点击按钮后，按钮消失“（可以自己添加video标签控制播放）

  6. 洛谷 P1036 选数【背包型DFS/选or不选】

    题目描述 已知 n 个整数 x1,x2,…,xn,以及一个整数 k(k<n).从 n 个整数中任选 k 个整数相加,可分别得到一系列的和.例如当 n=4,k＝3,4 个整数分别为 3,7,12, ...

  7. Chrome谷歌浏览器调试

    Chrome浏览器调试技巧  https://blog.csdn.net/u014727260/article/details/53231298

  8. 考试总结 模拟27（W）

    心得:太弱了,T1问题:理解错了题,矿石可以放到同一处,,太弱了,小凯的疑惑,没什么印象T2问题:拆式子T3问题:换根dp的思想模拟9T1+T2

  9. DesktopLayer.exe专杀

    这两天发现电脑卡慢. 同事电脑发现病毒,而后装上杀软后(一直在裸奔~~~),发现自己电脑也存在. DesktopLayer.exe 会有以下几个行为: 第一,会在C:\Program Files (x ...

  10. (转载)http压缩 Content-Encoding: gzip

    (内容转自http://liuviphui.blog.163.com/blog/static/20227308420141843933379/) HTTP内容编码和HTTP压缩的区别 HTTP压缩,在 ...