最近的一个项目前台使用的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. iscroll的滑动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HDU2699 扩展欧几里德

    //赤裸裸,不解释 #include<stdio.h> typedef long long LL;                 //hdu需用int64 void gcd(int a, ...

  3. gomod

    package main import "mycore" func main(){ mycore.ShowName() } main.go module mytest requir ...

  4. NOIP模拟 9.09

    AK300分 果实计数 (count.pas/.c/.cpp) 时间限制:1s,空间限制32MB 题目描述: 淘淘家有棵奇怪的苹果树,这棵树共有n+1层,标号为0~n.这棵树第0层只有一个节点,为根节 ...

  5. 洛谷P1832 A+B Problem（再升级） [2017年4月计划 动态规划03]

    P1832 A+B Problem(再升级) 题目背景 ·题目名称是吸引你点进来的 ·实际上该题还是很水的 题目描述 ·1+1=? 显然是2 ·a+b=? 1001回看不谢 ·哥德巴赫猜想 似乎已呈泛 ...

  6. 【eclipse】解决：eclipse或STS运行maven工程出现Missing artifact jdk.tools:jdk.tools:jar:1.7问题

    eclipse或STS运行maven工程出现Missing artifact jdk.tools:jdk.tools:jar:1.7问题 最近项目中使用到大数据平台,代码中应用了hbase-clien ...

  7. Mac上homebrew使用

    一.官方网址 Homebrew 二.目录 安装 查看帮助信息 查看版本 更新Homebrew自己 安装软件包 查询可更新的包 更新包 (formula) 清理旧版本 锁定不想更新的包 卸载安装包 查看 ...

  8. 本地 vs. 云：大数据厮杀的最终幸存者会是谁？— InfoQ专访阿里云智能通用计算平台负责人关涛

    摘要: 本地大数据服务是否进入消失倒计时?云平台大数据服务最终到底会趋向多云.混合云还是单一公有云?集群规模增大,上云成本将难以承受是误区还是事实?InfoQ 将就上述问题对阿里云智能通用计算平台负责 ...

  9. JQuery--关系选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. $.extend用法详解（一）

    jQuery.extend( target [, object1 ] [, objectN ] ) 在这里target是Object,它有两个作用: 1. 如果后面没有对应的object1及objec ...