ExtJs异步树,异步方式获取数据
1.下载Newtonsoft.Json.Net20.dll(.net 2.0版)后,放入Asp.net项目Bin文件夹中.
Newtonsoft.Json.Net20,是一个Object/Json转换工具,这里用来把对象转换成Json格式字符串.
2.树节点Model对象,
public class TreeModel{
private string _id,_parentid, _text;
private bool _leaf;
private List<TreeModel> _children = new List<TreeModel>();//子节点集合
public string id{
get { return _id; }
set { _id = value;}
}
public string parentid{
get { return _parentid; }
set { _parentid = value; }
}
public string text{
get { return _text; }
set { _text = value; }
}
public bool leaf{
get { return _leaf; }
set { _leaf = value; }
}
public List<TreeModel> children{
get { return _children; }
set { _children = value; }
}
//添加下级节点
public void addChild(TreeModel m)
{
_children.Add(m);
}
3.生成json字符串
public string GetNavTree(){
List<TreeModel> result = new List<TreeModel>();
List<TreeModel> list = dao.getNavTree();
//.....若干代码
return JsonConvert.SerializeObject(result);// Newtonsoft.Json.Net20里面的东东
}
字符串格式如:
[{"id":"2","parentid":"1","text":"节点一","leaf":false,
"children":[{"id":"11","parentid":"2","text":"节点一儿子一","leaf":true,"children":[]},
{"id":"12","parentid":"2","text":"节点一儿子二","leaf":true, children":[]}]
},
{"id":"3","parentid":"1","text":"节点二","leaf":false,
"children":[{"id":"17","parentid":"3","text":"节点二儿子一","leaf":true,"children":[]}]
}]
4.页面js
<script type="text/javascript">
Ext.onReady(function(){
//根节点
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"我是祖宗"});
//树
var tree=new Ext.tree.TreePanel({
renderTo:"show",
root:root,
loader: new Ext.tree.TreeLoader({url:"data.aspx"}),//生成Json格式字符串url
rootVisible:false
})
tree.expandAll();//展开
})
</script>
<div id="show"></div>
ExtJs同步树
1.获取Json字符串,比如从数据库中获取,可参考上例所示.
2.生成树
<script type="text/javascript">
var buildTree= function(root,data){
var child = null;
for(var i =0;i<data.length;i++){
child = new Ext.tree.TreeNode(data[i]);
root.appendChild(child);
if(data[i].children.length>0)
buildTree(child,data[i].children);
}
}
var root=new Ext.tree.TreeNode({id:"root",
text:"I am root"});
buildTree(root,jsontreedata);//jsontreedata是生成同步树所需Json格式数据,如上例所示
var tree = new Ext.tree.TreePanel({
autoScroll:true,
root:root,
renderTo:"show",
containerScroll:true,
rootVisible:false,
width:200,
listeners:{
"click":function(node,event){
if (node.isLeaf()) { //叶子节点点击不进入链接
//触发事件
} else {
event.stopEvent(); //不是叶子节点不触发事件
node.toggle(); //点击时展开
}
}
}
});
<div id="show"></div>
ps.
Ext.apply方法,用来复制 源对象 的所有属性 到 目标对象。
比如在上例中的TreeNode类构造函数中传入Json对象时,Json对象的所有属性将会 复制到 TreeNode类实例中
/**
* Copies all the properties of config to obj.
* @param {Object} obj The receiver of the properties
* @param {Object} config The source of the properties
* @param {Object} defaults A different object that will also be applied for default values
* @return {Object} returns obj
* @member Ext apply
*/
Ext.apply = function(o, c, defaults){
// no "this" reference for friendly out of scope calls
if(defaults){
Ext.apply(o, defaults);
}
if(o && c && typeof c == 'object'){
for(var p in c){
o[p] = c[p];
}
}
return o;
};