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中万恶的function实例分析
May 25 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
js命名空间写法示例
Dec 18 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 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
function.inc.php超越php
2006/12/09 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
jquery 指南/入门基础
2007/11/30 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python的argparse库使用详解
2018/10/09 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
python 实现音频叠加的示例
2020/10/29 Python
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
合作经营协议书
2014/04/17 职场文书
体育馆的标语
2014/06/24 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
参观邀请函范文
2015/02/02 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python