四月16日 Ext.TreePanel基本配置参数 _Web前端

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