首页 > 代码库 > easyUI树形节点点击和动态添加Tab-

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

2024-09-21 16:44:31   202人阅读

     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="http://www.mamicode.com/‘+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="http://www.mamicode.com/‘+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对象。

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

 

 

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


联系
我们