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对象。

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