做个项目使用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使用右键弹出菜单,并且将右键菜单的事件同时绑定在另外一个按钮上的时候,才会出现这种奇怪的现象。