extjs中treepanel(含栗子)

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 style="margin:10px;">
<div id="container">
</div>
<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

   });

   

   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);

    }

}

 效果图

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值