easyui ：tree前端工作

easyui

素材：

jQuery EasyUI 1.5API 中文版

如题今天会用到的是：树形结构的

我们只需要找到自己需要的然后放到代码处即可

这个是动态效果要用到的

再写树控件之前先把这两个放进项目中，没有他们那么就运行不了哦

 

然后就是将代码放入浏览器打开就会使这个效果，当然上面的那个代码会比较繁琐，树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

1. <ul id="tt"></ul>  

1. $('#tt').tree({   
2.     url:'tree_data.json'  
3. });  

使用loadFilter函数处理来自Web Services的JSON数据。

1. $('#tt').tree({   
2.     url: ...,   
3.     loadFilter: function(data){   
4.         if (data.d){   
5.             return data.d;   
6.         } else {   
7.             return data;   
8.         }   
9.     }   
10. });  

 然后我们写个script里面写个函数然后加上点击事件！！

效果就和之前一样就是双击的时候会有tab页要注意这个刷新的小按钮会弹出弹框

 

这一部分就是刷新的部分删除即可

（上面的代码已经删除为了让大家知道这个细节所以将这个代码单独拎出来）

 

 

 然后还有一个问题就是！！！我们一直双击一个的时候会一直出现如上图

这个部分原本是这样的，我们只要用节点的名称去作为标题

即：     title:node.text,    
            content:node.text,    

 然后判断，即if标题不存在就打开存在就不打开    if (!$('#tt').tabs('exists',node.text))

<script>
    $(function(){
        $('#funcTree').tree({   
            //树数据的请求地址
            url:ctx + '/data/tree_data1.json',//tree_data1.json这个里面放的是树结构
            onDblClick: function(node){
                if (!$('#tt').tabs('exists',node.text)){//node.text这个是我们自己的数据！
                    $('#tt').tabs('add',{   //add添加新的选项卡面板
                        title:node.text,    
                        content:node.text,    
                        closable:true
                    });  
            }
            }
        });  
    });
</script>