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

Posted 2020-09-18

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

 

[html] view plain copy

 

 print?

1. function addTab(title, url){  
2.     if ($(‘#tt‘).tabs(‘exists‘, title)){  
3.         $(‘#tt‘).tabs(‘select‘, title);  
4.     } else {  
5.         var content = ‘<iframe scrolling="auto" frameborder="0"  src="‘+url+‘" style="width:100%;height:100%;"></iframe>‘;  
6.         $(‘#tt‘).tabs(‘add‘,{  
7.             title:title,  
8.             content:content,  
9.             closable:true  
10.         });  
11.     }  
12. }  

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

[html] view plain copy

 

 print?

1.    function andTab(title,url){  
2. var tt = $(‘.easyui-tabs1‘);          
3. if (tt.tabs(‘exists‘, title)){  
4.         tt.tabs(‘select‘, title);  
5. } else {  
6.         var content = ‘<iframe scrolling="auto" frameborder="0"  src="‘+url+‘" style="width:100%;height:100%; padding:10px,5px,5px,10px;"></iframe>‘;  
7.         tt.tabs(‘add‘,{  
8.             title:title,  
9.             content:content,  
10.             closable:true  
11.         });  
12. }  
13.       
14.    }  

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

 

 

[html] view plain copy

 

 print?

1.   var nodes = $(‘.sider-nav‘).tree(‘getChildren‘);  
2. (‘.sider-nav‘).tree({  
3. onSelect: function(nodes) {  
4.     $(‘.sider-nav‘).tree(‘expand‘,nodes.target);              
5. },  
6. onClick: function(nodes) {  
7.     if($(‘.sider-nav‘).tree(‘isLeaf‘,nodes.target)) {  
8.         andTab(nodes.text, ‘login.html‘);  
9.     }  
10. }  
11.   });  

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

 

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

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

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