最近的一个项目前台使用的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. SQL 约束和表修改语句

    1.约束作用: 约束的目的就是确保表中的数据的完整性 2.常用的约束类型如下 主键约束:(Primary Key constraint) 要求主键列唯一,并且不允许为空    唯一约束:(Unique ...

  2. agc014F Strange Sorting

    这套题比较简单,以为自己能够独立A掉D和E,或许就能自己A掉F,看来还真是想多了 题意:给一个$n$的全排列,每次操作把$max(a[1],a[2],...,a[i]) = a[i]$的记为$high ...

  3. Excel函数学习：HLOOKUP函数

    Excel函数学习:HLOOKUP函数 HLOOKUP函数查找表的第一行中的值,返回该表中与找到的值在同一列的另一个值. 什么情况下使用HLOOKUP? HLOOKUP函数可以在查找行中找到精确匹配值 ...

  4. 3D hover文字特效

    body { font-family: 'Source Sans Pro', Arial, sans-serif; background: #becccc; text-transform: upper ...

  5. jnhs中国的省市县区邮编坐标mysql数据表

    https://blog.csdn.net/sln2432713617/article/details/79412896 -- 1.之前项目中需要全国的省市区数据,在网上找了很多,发现数据要么不全,要 ...

  6. centos7默认安装没有连接网络

    1.显示所有连接 #nmcli con show 2.连接网络 #nmcli con up ens33 这个ens33是通过第一步查到的 /etc/sysconfig/network-scripts目 ...

  7. JPA 将驼峰列名自动转换为_

    数据库中和代码中都没有'cat_age'列名:但是用jpa保存的时候,总是提示此错误:这个问题纠结半天,后来在朋友的指点下,找到问题所在: spring data  jpa 使用默认策略是Improv ...

  8. console 中的格式化打印（占位符），和样式定义

    格式化打印 Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) 首次发布对string substitutions的支持.你可以在传递给 ...

  9. Hibernate的映射机制是怎样？

    Hibernate的映射机制对象关系映射(Object Relation Mapping(ORM))是一种为了解决面向对象与面向关系数据库互不匹配现象的技术,简而言之ORM是通过使用描述对象之间映射的 ...

  10. 在liferay 7中如何删除service builder已经生成的数据库table

    在Liferay 7中,加了数据库保护机制,你改了service.xml的结构后,重新运行service builder,并不会帮你生成新的数据库表.然后你发现你在数据库中自己手动删除了表后,重新部署 ...