|
做個項目使用jquery easyui來做前端,也許是對此不是很熟悉,總是發(fā)現一些不可理解的事件。 主要源代碼如下: ![]()
<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 瀏覽器不要執(zhí)行與事件關聯的默認動作(如果存在這樣的動作) $('#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為異步操作,如果直接讀取子節(jié)點會無內容 } }); </script> <div class="container"> <div id="access_menu" class="easyui-menu" style="width:100px;"> <div id='access_menu_edit'>編輯本節(jié)點</div> <div id='access_menu_del'>刪除本條目</div> <div id='access_menu_refresh'>刷新節(jié)點</div> <div id='access_menu_new'>新增子節(jié)點</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'>狀態(tài)</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、在第一條上右鍵菜單,點擊“新增子節(jié)點”,然后樹形結構變成了如下圖,發(fā)現樹形結構的子節(jié)點重復出現了多次。
3、關閉權限分配按鈕,點擊上面的“+”形圖標,樹形結構展開,可以發(fā)現子節(jié)點完全是正常的。
4、從源代碼可以看到,點擊“新增子節(jié)點”與點擊上面的“+”形圖標綁定的事件是相同的,但是出來的結果卻不一樣。 ![]()
$("#access_lb_new,#access_menu_new").click(function(){
access_new();
});
5、查看發(fā)送系統執(zhí)行的日志可以發(fā)現,第一次右鍵菜單的時候發(fā)送了多次獲得子節(jié)點的請求。
6、將兩個按鈕的事件綁定代碼分開寫,如下,重復操作以上動作,發(fā)現結果就完全正常了,沒有出現多個請求與子節(jié)點重復的情況。 ![]()
$("#access_lb_new").click(function(){
access_new();
});
$("#access_menu_new").click(function(){
access_new();
});
7、同時,我嘗試了以第4點同樣的方式綁定兩個一般按鈕(非右鍵彈出菜單),也不會出現子節(jié)點重復出現的問題。由此可見,只有在treegrid使用右鍵彈出菜單,并且將右鍵菜單的事件同時綁定在另外一個按鈕上的時候,才會出現這種奇怪的現象。
|
|
|
來自: 昵稱10504424 > 《工作》