Jquery EasyUI中treegrid

Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件

InChatter系统开源聊天模块前奏曲

 

最近在研究WCF，又因为工作中的项目需要，要为现有的系统增加一个聊天模块以及系统消息提醒等，因此就使用WCF做服务器端开发了一个简单的系统。

开发最初学习了东邪孤独大哥的《传说的WCF系列》，文章写的很好，有兴趣的朋友也可以参考写，文章深入浅出，非常不错，坚持看完，相信在WCF方面可以入个门了，而且听说孤独大哥也来到的博客园呢~

上面绝非广告，完全是真心的感谢，没有孤独大哥的文章，开发之初可能真的不会像现在这么顺利，现在软件的聊天模块已经可以正常运行和交流了。

所以呢，我也想趁着这次机会：

1. 把自己学习到的知识，总结一下拿出来跟大家分享下
2. 就一步完善自己的聊天模块，希望能够做成一个开源的通用模块

一直都想把自己所学习到的知识跟大家分享，只是我这个人文笔确实不怎么样，而且还比较懒，更不想把自己的时间全部放在电脑面前，每次洗头都会看着掉发一把一把的，不过谁让我们喜欢这一行，更发自内心的喜欢呢，所以坚持是我们唯一的选择了。

从今往后，我会不断的督促自己，把学习到的知识经验跟大家一起分享，一起进步。

首先呢，我将把自己设计以及开发WCF开源聊天模块的过程以及过程中所涉及到的知识都写出来，希望大家与我一起见证这个开源项目的成大和壮大，同时我也在考虑为这个项目寻找Java、Andirod等语言方面的朋友，一起开发完成，但目前由于刚刚开始，很多地方都不太完备，大家也看不到任何东西呢，所以这个就推迟。我将首先开发WCF+WPF版本的模块。期待这个模块能够尽快跟大家见面。

这篇文章也算是开篇小记吧，乱七八糟的一大推，希望不会让各位觉得时间浪费了。

每天的一小步，成就人生的一大步，相信坚持的力量，愿与大家共成长

 

分类: .Net技术, InChatter系统开发, WPF

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

8、那到底为什么会出现这种事情呢？期待哪位大大为小弟解答一下。

 

 

分类: JavaScript