extjs中treepanel（含栗子）

最新推荐文章于 2024-10-14 16:16:09 发布

ghjzzhg

最新推荐文章于 2024-10-14 16:16:09 发布

阅读量4.8k

点赞数

分类专栏：前台页面类文章标签： extjs ext

前台页面类专栏收录该内容

45 篇文章 0 订阅

订阅专栏

TreePanel继承自Panel，在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点，比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍几个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>

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

   });

   

   mytree.setRootNode(root);

   mytree.render();//不要忘记render()下,不然不显示哦

})

json。ashx代码

C# 代码复制


using System;
using System.Web;
using System.Collections.Generic;
using System.Web.Script.Serialization;

public class jsondata 

{

    //定义jsondata类，存放节点数据

    public string id;

    public string text;

    public bool leaf;

    public List<jsondata> children=new List<jsondata>();//存放子节点

}



public class json : IHttpHandler {

    public List<jsondata> jsdata=new List<jsondata>();

    public void ProcessRequest (HttpContext context) {



        for (int i = 1; i < 5; i++)

        {

            jsondata jd = new jsondata();

            jd.id="num"+i;

            jd.text = "节点"+i;

            jd.leaf = false;

            for (int j = 1; j < 3; j++)

            {   jsondata subjd = new jsondata();   subjd.id = "sub" + j;   subjd.text = "子节点" + j;   subjd.leaf = true;   jd.children.Add(subjd);   }   

            jsdata.Add(jd);

        } 

        context.Response.Write(ToJson(jsdata.ToArray()));//ToArray()在IE里面好像缺了不行

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }



    public string ToJson(object o)

    {

        //序列化对象为json数据，很重要！

        JavaScriptSerializer j = new JavaScriptSerializer();

        return j.Serialize(o);

    }

}

效果图