easyUI树形节点点击和动态添加Tab

     easyUI是一种基于jQuery的UI框架，可以直接阅读官网的API教程学习，最近做的项目要用到这个框架，就一边看一边做，先看一下动态添加Tab，实际项目中我们都是希望点击一个节点，增加一个iframe的窗口出来，但是昨天看着API做一个简单的点击A标签增加iframe，死活就是不行，晚上回去终于搞定，看一下官方的例

    function addTab(title, url){
    	if ($('#tt').tabs('exists', title)){
    		$('#tt').tabs('select', title);
    	} else {
    		var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
    		$('#tt').tabs('add',{
    			title:title,
    			content:content,
    			closable:true
    		});
    	}
    }

没什么复杂的，传入title和url，最后把#改成 . 就好了，我刚开始学习，不知为什么，用浏览器断点调试，如果进不去else就换成 . 号，希望以后我能找到原因。

    function andTab(title,url){
	var tt = $('.easyui-tabs1');		
	if (tt.tabs('exists', title)){
			tt.tabs('select', title);
	} else {
			var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%; padding:10px,5px,5px,10px;"></iframe>';
			tt.tabs('add',{
				title:title,
				content:content,
				closable:true
			});
	}
		
    }

下面说动态添加树形菜单，项目中需求中不同的角色对应的功能列表不一样，那树形菜单也不一样，所以就在登陆的时候由后台把树形结构的JSON 传回前台UI界面，这个在API中有说明，easyUI封装的tree，我们展开父节点要点击前面的小三角，用户体验不好，我们希望点击整个节点的时候，如果有子节点就展开当前节点，没有子节点增加一个Tab，Tab的title就是子节点的text：

    var nodes = $('.sider-nav').tree('getChildren');
	$('.sider-nav').tree({
		onSelect: function(nodes) {
			$('.sider-nav').tree('expand',nodes.target);			
		},
		onClick: function(nodes) {
			if($('.sider-nav').tree('isLeaf',nodes.target)) {
				andTab(nodes.text, 'login.html');
			}
		}
    });

这里用到了expand和isLeaf这两个方法，

expand：展开一个节点，'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候，节点ID的值(名为'id'的参数)将会发送给服务器请求子节点的数据。

isLeaf：判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。

这样就解决了项目的需求，一点点的积累。