4月16日 Ext.TreePanel基本配置参数

TreePanel基本配置参数:

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

 

 

2.用TreeLoader加载数据生成树

 

//这里只介绍TreeLoader的参数一个
     dataUrl:"*****.**"//地址
     url:"****.**"//url参数和dataUrl参数一样

 效果图:

html代码:

<div id="container">

    </div> 

js代码:

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()下,不然不显示哦
})

上面的代码中dataUrl地址为json.ashx的代码是怎样呢？
让我们先来思考一个问题：

    我的解决方案:把.net数据转换为json对象。
                 using System.Web.Script.Serialization;
                 public string ToJson(object o)
                 {
                    JavaScriptSerializer j = new JavaScriptSerializer();
                    return j.Serialize(o);
                 }
   这里的o，我们可以定义个类的对象，传进去，转换为json对象

json.ashx代码:

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