easyui ---tree

最新推荐文章于 2024-08-02 17:23:07 发布

原创最新推荐文章于 2024-08-02 17:23:07 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tree #function #tabs #float #div #url

js 同时被 2 个专栏收录

99 篇文章

订阅专栏

jquery

24 篇文章

订阅专栏

本文展示了一个使用JavaScript实现的Tree与Tab面板联动的示例。当Tree中的节点被选中时，会自动加载对应的Tab内容；反之，当关闭Tab时，会取消选中Tree中的相应节点。

最近在写一个tree控制tab，tab反过来控制tree的例子：

$('#zhibiao2tree').tree({  
			        url:'/gwater/json/zhibiao1_tree.json',
				    checkbox:true,
				    onCheck:function(data){
				       if(data.checked){
				                $('#zhibiao2_tabs').tabs('add',{
				                    id:data.id,  
						            title:data.text,  
						            content:"<div align='center' id='"+data.id+"_citybing' style='float:left;'></div><div align='center' id='"+data.id+"_provincebing' style='float:left;'></div>",  
						            closable:true  
						        });  
						        loadFlashee('pieChart2',eval(data.id+"_shibin"),data.id+"_citybing");
						          setTimeout(function() {
										  loadFlashee('pieChart2',eval(data.id+"_shenbin"),data.id+"_provincebing");
								 }, 1000);
			
						        
				       }else{
						    $('#zhibiao2_tabs').tabs('close',data.text);  
				       }
				      
				    },
				    loadFilter: function(data){  
				        if (data.d){  
				            return data.d;  
				        } else {  
				            return data;  
				        }  
				    }  
			   }); 
			   
			    $('#zhibiao1_tabs').tabs({     
				      onClose:function(title){     
				              var nodes = $('#zhibiao1tree').tree('getChecked');   
			                  for (var i = 0; i < nodes.length; i++) {  
			                      var temptext= nodes[i].text.trim();  
			                      if(temptext==title){
			                         $('#zhibiao1tree').tree('uncheck', nodes[i].target);
			                      }
			                  }   
				      }   
			    });