Extjs学习 Ext.tree.TreePane

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参数一样

 效果图:
Extjs学习 Ext.tree.TreePane_第1张图片Extjs学习 Ext.tree.TreePane_第2张图片Extjs学习 Ext.tree.TreePane_第3张图片
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);
    }
}

你可能感兴趣的:(Extjs学习 Ext.tree.TreePane)