最近的一个项目前台使用的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. [Array]485. Max Consecutive Ones

    Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: [1, ...

  2. Linux 拷贝有更改的文件

    cp -Ruv /home/username/trunk_new/app/* /data/httpdocs/wwwroot/app/

  3. iview中table的render()函数

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...

  4. Eular质数筛法

    小Hi:我们可以知道,任意一个正整数k,若k≥2,则k可以表示成若干个质数相乘的形式.Eratosthenes筛法中,在枚举k的每一个质因子时,我们都计算了一次k,从而造成了冗余.因此在改进算法中,只 ...

  5. IoT: 物联网安全测试经验总结

    前言 今年早些时候,我参与了许多关于物联网解决方案的安全测试.主要目标是找出体系结构和解决方案中的漏洞.在这篇文章中,我将讨论一些与物联网解决方案的问题和挑战. 什么是物联网? 在你学习有关IPv6的 ...

  6. 计蒜客 Red Black Tree(树形DP)

    You are given a rooted tree with n nodes. The nodes are numbered 1..n. The root is node 1, and m of ...

  7. Dreamweaver CS5更改代码颜色方法代码

    XP系统下: C:\Documents and Settings\Administrator\ApplicationData\Adobe\Dreamweaver CS4\zh_CN\Configura ...

  8. HTML input type=file文件选择表单的汇总（二）

    1. 原生file input大小.按钮文字等UI自定义 元素input的原生样式,不是太好看: 有一种方法是这样的:让file类型的元素透明度0,覆盖在我们好看的按钮上.然后我们去点击好看的按钮,实 ...

  9. etree不存在解决方法

    from lxml import html text=xxx//测试的html文本 etree = html.etree htmlDiv = etree.HTML(text) title = html ...

  10. 【水滴石穿】rnTest

    其实就是一个小的demo,不过代码分的挺精巧的 先放地址:https://github.com/linchengzzz/rnTest 来看看效果 确实没有什么可以说的,不过代码部分还行 先入口文件 / ...