Jquery EasyUI Datagrid右键菜单实现方法

最近在学Jquery EasyUI，现在来说一说EasyUI的DataGrid，一般当我们在实现前端界面的时候，经常在DataGrid的上面或者后面加一些按钮，方便用户进行一些添加，删除，编辑等功能

用户在每次使用的时候，都需要去先选中一条或者多条数据，然后在去点按钮进行相关操作，这样其实还是很麻烦的，做项目的过程中，为了用户着想，做了一个右键菜单，用户想要删除或者编辑某一条数据直接在其位置上右键就可以。

下面上HTML 代码

<div id="menu" class="easyui-menu" style="width: 30px; display: none;">
 <!--放置一个隐藏的菜单Div-->
 <div id="btn_Delete" data-options="iconCls:'icon-remove'" onclick="">删除</div>
 <!--具体的菜单事件请自行添加，跟toolbar的方法是基本一样的-->
 <div id="btn_Modify" data-options="iconCls:'icon-edit'">编辑</div>
 </div>

下面是Javascript的代码

//DataGrid右键菜单代码：
$("#dg").datagrid({
 onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件
 //三个参数：e里面的内容很多，真心不明白，rowIndex就是当前点击时所在行的索引，rowData当前行的数据
 e.preventDefault(); //阻止浏览器捕获右键事件
 $(this).datagrid("clearSelections"); //取消所有选中项
 $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
 $('#menu').menu('show', {
  //显示右键菜单
  left: e.pageX,//在鼠标点击处显示菜单
  top: e.pageY
 });
 e.preventDefault(); //阻止浏览器自带的右键菜单弹出
 }
});

下面是实现后的效果：

现在只是简单的实现了右键菜单，后期还会有改进。我们做出来的东西最后是要交给用户使用的，为用户着想，怎样让用户用着舒心，在用户意想不到的时候，帮用户完成了他们想要完成的工作，这就是这个软件最大的成功！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JQueryEasyUI datagrid框架的基本使用

    JQueryEasyUI datagrid框架的基本使用

    今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细:无需废话,上代码了: 复制代码 代码如下: <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /><!--easyui最全的样式包也可单独引

  • jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页,可以下载完整开发包,里面有示例代码可以参考. 运行效果图: 由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考. 在页面中首先要引用相关的css以及js文件,这样才能使用该组件. css部分: <link href="../Js/jQueryEasyUI/them

  • jQuery easyui datagrid动态查询数据实例讲解

    jQuery easyui datagrid动态查询数据实例讲解

    该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例 HTML前端代码 复制代码 代码如下: <?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=&qu

  • EasyUI中datagrid在ie下reload失败解决方案

    问题 最近使用EasyUI开发后台系统,测试时发现个奇葩的问题,$('dg').datagrid('reload'); 重新加载表格数据时,ie下一点反应都没有.后来发现其实并不是没有反应,而是浏览器使用了缓存. 解决方案 网上网友总结出来的解决方案有以下几种: 1.在url后加时间戳,使第一次加载和reload中访问的url不一致,使系统无法使用IE缓存.通过测试发现,EasyUI请求时后面已经自带一串随机数_145232xxx,但是ie还是会使用缓存.后来我在请求的js中为url加上rand

  • PHP – EasyUI DataGrid 资料存的方式介绍

    PHP – EasyUI DataGrid 资料存的方式介绍

    继上篇文章 PHP – EasyUI DataGrid 资料取的方式,本篇继续讲述,如何操作 DataGrid,把资料存入资料库,并实现 MVC 架构,将资料层分离.独立运作.本篇文章主要是改良,原 EasyUI DataGrid 的范例  Build CRUD Application with jQuery EasyUI. 在官方范例中已经示范如何操作资料,但其中有个问题就是,你要操作资料的每个动作都需要一支对应的程式才能动作,像是新增.删除.修改以及取得资料,总共至少要有四支对应程式才能运作

  • 扩展easyui.datagrid，添加数据loading遮罩效果代码

    在使用的过程中,发现easyui目前还缺少一些小功能或是未开放出来 拿datagrid插件来说,数据加载提供了两种方式远程和本地数据加载,但只有远程数据加载时才会显示数据加载的遮罩层,在数据加载完成后隐藏遮罩层:而本地数据加载时则不会出现遮罩,这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要 不过呢,在实际的项目开发过程中使用时,没有考虑使用url方式加载数据,则采用了loadData方法来异步加载数据,这个时候就很有必要显示遮罩层来提示用户当前正在加载数据,分析easyui的datag

  • ASP.NET MVC使用EasyUI的datagrid多选提交保存教程

    需要实现EasyUI的datagrid组件加入选择checkbox列,并提交后台批量添加的功能,页面代码如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(function() { //searchbox $('#selectgoods-keywords').searchbox({ searcher: function(val, name) { searchInfo

  • jQuery EasyUI API 中文文档 - DataGrid数据表格

    扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

  • jQuery EasyUI datagrid实现本地分页的方法

    jQuery EasyUI datagrid实现本地分页的方法

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

  • Jquery下EasyUI组件中的DataGrid结果集清空方法

    Jquery下EasyUI组件中的DataGrid结果集清空方法

    我们有一个模块如下图,要求选择"地区"及"代维公司"后,刷新第一个DataGrid框体 并以第一个结果集中的行为数据条件点击完成下一个框体的检索 现在我们已完成相应功能,并在选择"地区"及"代维公司"并保证这两个选项同时有值后,自动刷新第一个DataGrid(DG1)结果集 但是在DG1刷新完毕后,后面两个紧跟的DG2及DG3还是保有之前的结果 我试图更改DG2及DG3的查询条件,手动传一个空的ID值给query()方法,但是

随机推荐