$(function(){
		 $("#tree").tree({  
             url:'getNodesByParentId.do?id=1',//請求路徑，id為根節點的id
             onLoadSuccess:function(node,data){  
                  var tree = $(this);  
                  console.info(data);
                  if(data){  
                      $(data).each(function(index,d) {  
                          if (this.state=='closed') {  
                              tree.tree('expandAll');  
                          }  
                      });  
                  }  
             },
             onClick:function(node){// 新增tab  
                 if(node.attributes){  
                     node1=$("#tree").tree('getParent',node.target);  
                     openTab(node.text,node.attributes,node1.text);  
                 }  
             },  
             onContextMenu: function(e,node){// 生成右鍵選單  
                 e.preventDefault();  
                 $(this).tree('select',node.target);  
                 $('#tabsMenu').menu('show',{  
                     left: e.pageX,  
                     top: e.pageY  
                 });  
                 $('#tabsMenu').menu({      
                     onClick:function(item){   // 根據選擇的id判斷選中的是新增，修改，還是刪除  
                        if(item.id==1){// 新增  
                            document.getElementById("mydialog").title = "新增節點";  
                            var node = $("#tree").tree('getSelected');  
                            document.getElementById("txRolename").value = "";  
                            $('#mydialog').show(); // 彈出框顯示  
                            $('#mydialog').dialog({   
                                 collapsible: true,   
                                 minimizable: true,   
                                 maximizable: true,   
                               
                                 buttons: [{   
                                    text: '提交',   
                                    iconCls: 'icon-ok',   
                                    handler: function() {   
                                         $.ajax({  
                                             url : "addTreeNode.do",  
                                             type : "post",  
                                             async : false,  
                                             data : "text="+$("#txRolename").val()+"&pid="+node.id,  
                                             dataType:"json",  
                                             success : function(data) {  
                                                 loadTree();                                               
                                                 $('#mydialog').dialog('close');  
                                                 $.messager.progress(); 
                                             }                                           
                                         });  
                                    }   
                                 }, {   
                                    text: '取消',   
                                    handler: function() {   
                                        $('#mydialog').dialog('close');  
                                    }   
                                    }]   
                            });   
                              
                        }else if(item.id==2){// 修改  
                            var node = $("#tree").tree('getSelected');  
                            document.getElementById("mydialog").title = "修改節點";  
                            document.getElementById("txRolename").value = node.text;  
                            $('#mydialog').show();   
                            $('#mydialog').dialog({   
                                 collapsible: true,   
                                 minimizable: true,   
                                 maximizable: true,   
                               
                                 buttons: [{   
                                    text: '提交',   
                                    iconCls: 'icon-ok',   
                                    handler: function() {   
                                           
                                         $.ajax({  
                                             url : "updTreeNode.do",  
                                             type : "post",  
                                             async : false,  
                                             data : "text="+$("#txRolename").val()+"&id="+node.id,  
                                             dataType:"json",  
                                             success : function(data) {  
                                                 loadTree();                                                   
                                                 $('#mydialog').dialog('close');  
                                             }  
                                           
                                         });  
                                    }   
                                 }, {   
                                    text: '取消',   
                                    handler: function() {   
                                        $('#mydialog').dialog('close');  
                                    }   
                                    }]   
                            });   
                              
                        }else if(item.id==3){// 刪除  
                            var node = $("#tree").tree('getSelected');  
                            $('#mydialogtemp').show();   
                            $('#mydialogtemp').dialog({   
                                 collapsible: true,   
                                 minimizable: true,   
                                 maximizable: true,   
                               
                                 buttons: [{   
                                    text: '提交',   
                                    iconCls: 'icon-ok',   
                                    handler: function() {   
                                         alert('提交資料');   
                                         $.ajax({  
                                             url : "delTreeNode.do",  
                                             type : "post",  
                                             async : false,  
                                             data :"id="+node.id,  
                                             dataType:"json",  
                                             success : function(data) {  
                                                 loadTree();                                                   
                                                 $('#mydialogtemp').dialog('close');  
                                             }  
                                           
                                         });  
                                    }   
                                 }, {   
                                    text: '取消',   
                                    handler: function() {   
                                        $('#mydialog').dialog('close');  
                                    }   
                                    }]   
                            });   
                              
                        }  
                     }      
                 })   
			}
		 })
		
	});
	
	//新增lab標籤
	function openTab(text,url,text1){  
	    
	    if($("#tabs").tabs('exists',text)){  
	        $("#tabs").tabs('select',text);  
	    }else{  
	        url = url+"area="+text1;  
	        alert(url);  
	        var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";  
	        $("#tabs").tabs('add',{  
	            title:text,  
	            closable:true,  
	            content:content  
	        });  
	    }  
	}  
	
	// 載入樹  
    function loadTree(){  
        $("#tree").tree({  
            url:'getNodesByParentId.do?id=1',  
            onLoadSuccess:function(node,data){  
                 var tree = $(this);  
                 if(data){  
                     $(data).each(function(index,d) {  
                         if (this.state=='closed') {  
                             tree.tree('expandAll');  
                         }  
                     });  
                 }  
            }});  
    }  
 

4.2 後臺介面新增