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 iframe内的函数调用实现方法
Jul 19 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
详解Vite的新体验
Feb 22 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 和 MySQL 基础教程(一)
2006/10/09 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
使用python 3实现发送邮件功能
2018/06/15 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python实现结构体代码实例
2020/02/10 Python
Python csv文件记录流程代码解析
2020/07/16 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2015年纪委工作总结
2015/05/13 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技