Jquery EasyUI Datagrid右键菜单实现方法


Posted in Javascript onDecember 30, 2016

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

Jquery EasyUI 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(); //阻止浏览器自带的右键菜单弹出 
 } 
});

下面是实现后的效果:

Jquery EasyUI Datagrid右键菜单实现方法

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 #Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 #Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 #Javascript
浅谈JavaScript的函数及作用域
Dec 30 #Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 #Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 #Javascript
浅谈js script标签中的预解析
Dec 30 #Javascript
You might like
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
PHP个人网站架设连环讲(一)
2006/10/09 PHP
PHP4实际应用经验篇(3)
2006/10/09 PHP
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
jquery动态添加option示例
2013/12/30 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
JS实现简易计算器
2020/02/14 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
python聊天程序实例代码分享
2013/11/18 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
python安装以及IDE的配置教程
2015/04/29 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
专升本个人自我评价
2013/12/22 职场文书
银行服务感言
2014/03/01 职场文书
2014年科协工作总结
2014/12/09 职场文书
会议主持词结束语
2015/07/03 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫