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 通用简单的table选项卡实现
May 07 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
深入理解node.js http模块
Jan 24 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 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
php通过文件流方式复制文件的方法
2015/03/13 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
别了 JavaScript中的isXX系列
2012/08/01 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
vue实现登录拦截
2020/06/29 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
python开启debug模式的方法
2019/06/27 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
解决python 找不到module的问题
2020/02/12 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
Python如何合并多个字典或映射
2020/07/24 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
python 实现aes256加密
2020/11/27 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
企业授权委托书范本
2014/04/02 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
千手观音观后感
2015/06/03 职场文书
统招统分证明
2015/06/23 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS