您的位置:首页 > Web前端 > extjs > 正文

extjs中treepanel例子

更多 时间:2014-4-29 类别:Web前端 浏览量:33163

extjs中treepanel例子

extjs中treepanel例子

一、TreePanel基本配置参数:

  •  
  • JScript 代码   复制
  • 
    //TreePanel配置参数
    
    animate:true//展开,收缩动画,false时,则没有动画效果
    
    autoHeight:true//自动高度,默认为false
    
    enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
    
    enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
    
    enableDrop:true//仅仅drop
    
    lines:true//节点间的虚线条
    
    loader:Ext.tree.TreeLoader//加载节点数据
    
    root:Ext.tree.TreeNode//根节点
    
    rootVisible:false//false不显示根节点,默认为true
    
    trackMouseOver:false//false则mouseover无效果
    
    useArrows:true//小箭头
    
    		
  •  

    二、TreeNode的基本配置参数:

  •  
  • JScript 代码   复制
  • 
    //TreeNode常用配置参数
    
    checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
    
    expanded:fasle//展开,默认不展开
    
    href:"http:/www.cnblogs.com"//节点的链接地址
    
    hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
    
    leaf:true//叶子节点,看情况设置
    
    qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下
    
    text:"节点文本"//节点文本
    
    singleClickExpand:true//用单击文本展开,默认为双击
    
    		
  •  

     

    三、treepanel实例

     

    1.第一个静态树--最简单的树
     

  • JScript 代码   复制
  • 
    Ext.onReady(function(){
    
       var mytree=new Ext.tree.TreePanel({
    
           el:"container",//应用到的html元素id
    
           animate:true,//以动画形式伸展,收缩子节点
    
           title:"Extjs静态树",
    
           collapsible:true,
    
           rootVisible:true,//是否显示根节点
    
           autoScroll:true,
    
           autoHeight:true,
    
           width:150,
    
           lines:true,//节点之间连接的横竖线
    
           loader:new Ext.tree.TreeLoader(),//
    
           root:new Ext.tree.AsyncTreeNode({
    
               id:"root",
    
               text:"根节点",//节点名称
    
               expanded:true,//展开
    
               leaf:false,//是否为叶子节点
    
               children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]
    
           })
    
       });
    
       mytree.render();//不要忘记render()下,不然不显示哦
    
    })
    
    		
  •  

    效果图:

     

    2.通过TreeNode自定义静态树

     

    html代码

    <body style="margin:10px;">
    <li id="container">
    </li>
    <iframe name="mainFrame" id="mainFrame" height="100px" width="200px" src="jstest.htm"></iframe>

    </body>

  •  
  • JScript 代码   复制
  • 
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
    
       var mytree=new Ext.tree.TreePanel({
    
           el:"container",
    
           animate:true,
    
           title:"Extjs静态树",
    
           collapsible:true,
    
           enableDD:true,
    
           enableDrag:true,
    
           rootVisible:true,
    
           autoScroll:true,
    
           autoHeight:true,
    
           width:150,
    
           lines:true
    
       });
    
       
    
       //根节点
    
       var root=new Ext.tree.TreeNode({
    
           id:"root",
    
           text:"控制面板",
    
           expanded:true
    
       });
    
       
    
       //第一个子节点及其子节点
    
       var sub1=new Ext.tree.TreeNode({
    
           id:"news",
    
           text:"新闻管理",
    
           singleClickExpand:true
    
       });
    
       sub1.appendChild(new Ext.tree.TreeNode({
    
           id:"addNews",
    
           text:"添加新闻",
    
           href:"http://www.baidu.com",
    
           hrefTarget:"mainFrame",
    
           qtip:"打开百度",
    
           listeners:{//监听
    
              "click":function(node,e){
    
                          alert(node.text)
    
                      }
    
           }
    
       }));
    
       sub1.appendChild(new Ext.tree.TreeNode({
    
           id:"editNews",
    
           text:"编辑新闻"
    
       }));
    
       sub1.appendChild(new Ext.tree.TreeNode({
    
           id:"delNews",
    
           text:"删除新闻"
    
       }));
    
       
    
       root.appendChild(sub1);
    
       
    
       root.appendChild(new Ext.tree.TreeNode({
    
            id:"sys",
    
            text:"系统设置"
    
       }));
    
       
    
       mytree.setRootNode(root);//设置根节点
    
       
    
       mytree.render();//不要忘记render()下,不然不显示哦
    
    })
    
    		
  •  

    效果图

     

    3.用TreeLoader加载数据生成树

  •  
  • JScript 代码   复制
  • 
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
    
       var mytree=new Ext.tree.TreePanel({
    
           el:"container",
    
           animate:true,
    
           title:"简单Extjs动态树",
    
           collapsible:true,
    
           enableDD:true,
    
           enableDrag:true,
    
           rootVisible:true,
    
           autoScroll:true,
    
           autoHeight:true,
    
           width:150,
    
           lines:true,
    
           //这里简简单单的loader的几行代码是取数据的,很经典哦
    
           loader:new Ext.tree.TreeLoader({
    
              dataUrl:"json。ashx"
    
           })
    
       });
    
       
    
       //根节点
    
       var root=new Ext.tree.AsyncTreeNode({
    
           id:"root",
    
           text:"控制面板",
    
           expanded:true
    
       });
    

    标签:treepanel extjs