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 // 小箭头
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 // 小箭头
//
这里只介绍TreeLoader的参数一个
dataUrl:
"
*****.**
"
//
地址
url:
"
****.**
"
//
url参数和dataUrl参数一样
html代码:
<
div
id
="container"
>
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的代码是怎样呢?
让我们先来思考一个问题:
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);
}
}
using
using
using
public
{
}
public
}