Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件
做个项目使用jquery easyui来做前端,也许是对此不是很熟悉,总是发现一些不可理解的事件。
主要源代码如下:
<script type="text/javascript">
$(function(){
var access_editingId; //当前正在编辑的
var access_lastChildName;
var access_addclick=0; //点击了添加
$('#access_tg').treegrid({
//右键
onContextMenu:function(e,row){
e.preventDefault(); //该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)
$('#access_tg').treegrid('select',row.id);
$('#access_menu').menu('show',{
left: e.pageX,
top: e.pageY
});
}
});
$("#access_lb_new,#access_menu_new").click(function(){
access_new();
});
function access_new(){
var tt=$('#access_tg');
var row = tt.treegrid('getSelected'); //获取选中的标签项
tt.treegrid('reload',row.id); //reload为异步操作,如果直接读取子节点会无内容
} });
</script>
<div class="container">
<div id="access_menu" class="easyui-menu" style="width:100px;">
<div id='access_menu_edit'>编辑本节点</div>
<div id='access_menu_del'>删除本条目</div>
<div id='access_menu_refresh'>刷新节点</div>
<div id='access_menu_new'>新增子节点</div>
</div>
<table id="access_tg" title="权限分配" class="easyui-treegrid" style="height:500px"
url="/Admin/Access/treegrid" toolbar="#access_toolbar"
rownumbers="true" idField="id" treeField="description">
<thead>
<tr>
<th field="id" width="40">ID</th>
<th field="description" width="200" editor='text'>描述</th>
<th field="name" width="50">名称</th>
<th field="action" width="200" editor='text'>动作</th>
<th field="role" width="200" editor='text'>角色</th>
<th field="state" width="200" editor='text'>状态</th>
<th field="parentid" width="200" editor='text'>父层</th>
</tr>
</thead>
</table>
<div style="height:5px"></div>
<div id="access_toolbar" >
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" id="access_lb_new">
</div>
</div>
显示界面如下:
1、点击几次权限分配按钮,可以打开“权限分配”页面,然后点击关闭,再次打开。
2、在第一条上右键菜单,点击“新增子节点”,然后树形结构变成了如下图,发现树形结构的子节点重复出现了多次。

3、关闭权限分配按钮,点击上面的“+”形图标,树形结构展开,可以发现子节点完全是正常的。

4、从源代码可以看到,点击“新增子节点”与点击上面的“+”形图标绑定的事件是相同的,但是出来的结果却不一样。
$("#access_lb_new,#access_menu_new").click(function(){
access_new();
});
5、查看发送系统执行的日志可以发现,第一次右键菜单的时候发送了多次获得子节点的请求。

6、将两个按钮的事件绑定代码分开写,如下,重复操作以上动作,发现结果就完全正常了,没有出现多个请求与子节点重复的情况。
$("#access_lb_new").click(function(){
access_new();
});
$("#access_menu_new").click(function(){
access_new();
});
7、同时,我尝试了以第4点同样的方式绑定两个一般按钮(非右键弹出菜单),也不会出现子节点重复出现的问题。由此可见,只有在treegrid使用右键弹出菜单,并且将右键菜单的事件同时绑定在另外一个按钮上的时候,才会出现这种奇怪的现象。
Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件的更多相关文章
- qt中qlineedit和qtextedit右键菜单翻译成中文
没有linguist和lupdate等命令需要安装Linguist: 在Terminal中输入: sudo apt-get install qt4-dev-tools qt4-doc qt4-qtco ...
- 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件
jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...
- jquery绑定事件时如何向事件函数里传参数
jquery绑定事件时如何向事件函数里传参数 jquery绑定事件时如何向事件函数里传参数 举例子说明: 步骤1: var button=$('<button type="button ...
- jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页
※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view model public class Book public strin ...
- Winform中怎样设置ContextMenuStrip右键菜单的选项ToolStripMenuItem添加照片
场景 怎样在Winform程序中添加鼠标右键时使子选项显示图片. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程 ...
- 使用easyui为tab页增加右键菜单
在使用easyui进行上左右布局一文中,我们已经使用easyui搭建起了一个简单的上左右布局.在使用的过程中,我们经常会遇到tab页打开的太多,但只能一个一个的关闭的烦恼,这个时候有没有想到eclip ...
- EasyUI 的Tab 标签添加右键菜单
样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href=& ...
- 为EasyUI 的Tab 标签添加右键菜单
在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群:15129679 <!doctype html> ...
- DevExpress中GridView上的右键菜单
1. 先拖一个PopupMenu和BarManage控件,设置PopupMenu的Manager属性为BarManager. 2. 先选中GridView,不是GridControl,在属性窗口中,选 ...
随机推荐
- JS跨域笔记
什么是跨域,跨域是指不同域之间相互访问,只要协议.域名.端口有任何一个不同,都被当作是不同的域. 对于端口和协议的不同,只能通过后台来解决,前台是无能为力的. 受浏览器同源策略的限制,本域的js不能操 ...
- Hibernate继承映射
在面向对象的程序领域中,类与类之间是有继承关系的,例如Java世界中只需要extends关键字就可以确定这两个类的父子关系,但是在关系数据库的世界中,表与表之间没有任何关键字可以明确指明这两张表的父子 ...
- solr使用方法 完全匹配
最近一直被solr的搜索困扰,搜索汉字时不能搜索出自己想要的内容,经过研究和查询发现,问题出在没有完全匹配上,主要还是对solr使用不太熟练. 解决方法:以前UserRealname:某某家长,这样搜 ...
- Android开发环境搭建(windows OS)之补充
这几天搭建了个安卓开发环境,也想玩玩安卓开发.在查询CSDN,CNBLOG,视频网站之后终于把开发环境搭建起来了,发现所有的指导都比较离散,比如有些只说安装方法,有些只说下载方法.本文来个集大成,算是 ...
- cocos2d-x增加控制台程序代码
#include "main.h" #include "AppDelegate.h" #include "CCEGLView.h" USIN ...
- Android中FTP服务器、客户端搭建以及SwiFTP、ftp4j介绍
本文主要内容: 1.FTP服务端部署---- 基于Android中SwiFTP开源软件介绍: 2.FTP客户端部署 --- 基于ftp4j开源jar包的客户端开发 : 3.使用步骤 --- 如何测试我 ...
- QtSpeech会让Qt说话
想要多了解QtSpeech,那么随着本文的文字往下走吧!QtSpeech是一个Qt封装的跨平台TTS(文本变成语音输出)API,在不同平台下利用系统自带的TTS引擎.在Windows下使用SAPI, ...
- 关于android应用--内存的优化
以下内容为转载自网上,然后自己加工贴合到一块的: 原文地址:http://www.cnblogs.com/frydsh/archive/2012/12/09/2810601.html http://w ...
- CLOSE_WAIT状态的原因与解决方法 --转
转自:http://blog.chinaunix.net/uid-20357359-id-1963662.html 这个问题之前没有怎么留意过,是最近在面试过程中遇到的一个问题,面了两家公司,两家公司 ...
- (转载)Ant教程
ant教程(一) 写在所有之前 为了减少阅读的厌烦,我会使用尽量少的文字,尽量明白的表达我的意思,尽我所能吧.作为一个学习者,在我的文章中会存在各种问题,希望热心人指正.目录大概是这样 ant教程 ( ...