最近的一个项目前台使用的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. 利用Qt自带工具发布程序

    Qt官方开发环境生成的exe发布方式--使用windeployqt 从开始菜单-->Qt 5.4.0-->5.4-->MinGW 4.9 (32-bit)-->Qt 5.4 f ...

  2. tr的display属性出现td的colspan无效问题

    http://www.aichengxu.com/other/9262680.htm 今天在做项目的时候发现用javascript控制 tr 的显示隐藏时,当把tr的显示由“display:none” ...

  3. Oracle基础知识：DECODE、NVL

    select 1 from PMADW.GET_WX_DATAPUSH_NEW_CHECK A INNER JOIN PMADW.V_EXCEPTION_QTY_MAIN B on DECODE( A ...

  4. ubuntu 已安装 post-installation 脚本 返回错误状态 1

    1.$ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info_old //现将info文件夹更名 2.$ sudo mkdir /var/lib/dpkg/inf ...

  5. 关于neo4j的嵌入式和驱动包模式该如何选择，还请解惑

    看了网上的一些资料和Neo4j权威指南这本书.与图遍历相关的介绍都是基于嵌入式模式下的java Api.但是个人觉得在实际的项目中,嵌入式的模式,代码必须放在数据库所在服务器上,且服务器的启停操作都在 ...

  6. Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器

    MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...

  7. 【洛谷P2907】 【USACO08OPEN】农场周围的道路 水模拟分治

    P2907 [USACO08OPEN]农场周围的道路Roads Around The Farm 题目描述 Farmer John's cows have taken an interest in ex ...

  8. Yann LeCun清华演讲：深度学习与人工智能的未来

    2017年3月22日下午,Facebook人工智能研究院院长.纽约大学终身教授Yann LeCun在清华大学大礼堂为校内师生以及慕名而来的业内人士呈现了一场主题为<深度学习与人工智能的未来(De ...

  9. 写论文，没数据？R语言抓取网页大数据

    写论文,没数据?R语言抓取网页大数据 纵观国内外,大数据的市场发展迅猛,政府的扶持也达到了空前的力度,甚至将大数据纳入发展战略.如此形势为社会各界提供了很多机遇和挑战,而我们作为卫生(医学)统计领域的 ...

  10. Nginx 对访问量的控制

    目的 了解 Nginx 的 ngx_http_limit_conn_module 和 ngx_http_limit_req_module 模块,对请求访问量进行控制. Nginx 模块化 nginx ...