Ext动态树详解

最近在学习Ext，在园子里也看了好多别人的文章，今天自己动手来实现一个动态树。首先先看效果图吧

 

 

 

 

 

 

 

效果就如上面所示，接下来一步一步来实现吧！代码只贴关键部分！

第一 数据库表的设计 还是请大家看图

很简单的表，就不说了。

第二 数据层用Linq 文件是：TreeLinqAccess

代码

public List < TreeItem > GetTreeByPid(string pid)
{
var q = from t in db.TreeItem
where t.pid == pid
select t;
return q.ToList();
}

第三 数据层与Ext的交互用ashx类型的一般处理程序

 

代码

public void GetTreeNode()
{
object node = Convert.ToString(Request[ " node " ]);

if (node != null )
{
StringBuilder jsonData = new StringBuilder();
string pid = Request[ " node " ].Trim();
List < TreeItem > ls = access.GetTreeByPid(pid);

if (ls.Count > 0 )
{
jsonData.Append( " [ " );

foreach (TreeItem nodes in ls)
{
{
JsonConvert < TreeItem > json = new JsonConvert < TreeItem > ();
bool isLeaf = access.GetTreeByPid(nodes.id).Count == 0 ? true : false ;
string nodeJsonString = json.ToTreeNode(nodes.id, nodes.text, isLeaf).ToString();
jsonData.Append(nodeJsonString);
jsonData.Append( " , " );
}

}

// 去掉末尾“,”号
if (jsonData[jsonData.Length - 1 ] == ' , ' )
{
jsonData.Remove(jsonData.Length - 1 , 1 );
}

jsonData.Append( " ] " );
}

Response.Write(jsonData);
Response.End();
}
}

这里简单说明下:

　　1 access是上面Linq的实例 如：TreeLinqAccess access = new TreeLinqAccess()

　　2 Request["node"] 接收到的node是对应ext树的id

　　3 toTreeNode是app_code里的方法

代码

public StringBuilder ToTreeNode( string id, string text, bool isLeaf)
{
StringBuilder jsonData = new StringBuilder();

jsonData.Append( " { " );
jsonData.Append( " id:' " );
jsonData.Append(id);
jsonData.Append( " ',text:' " );
jsonData.Append(text);
jsonData.Append( " ' " );
jsonData.Append( " ,leaf: " );
jsonData.Append(isLeaf.ToString().ToLower());
jsonData.Append( " } " );

return jsonData;
}

第四 ext代码

 

代码

var dTree = new Ext.tree.TreePanel({
id: ' myDynamicTree ' ,
renderTo: ' mainTab_DynamicTree ' ,
title: ' Ext动态树 ' ,
width: 150 ,
animate: true , // 以动画形式伸展,收缩子节点
collapsible: true ,
autoHeight: true ,
autoScroll: true ,
rootVisible: true ,
// lines:true,
// useArrows: true, //小箭头样式 默认是+-
loader: new Ext.tree.TreeLoader({
dataUrl: " ../Service/TreeService.ashx?Method=GetTreeNode "
}),
root: new Ext.tree.AsyncTreeNode({
id: ' 0 ' ,
text: ' 根节点 ' ,
expanded: true
}),
listeners: // 监听事件
{
' click ' : function (node, e) {
Ext.MessageBox.alert( " 点击的节点 " , " text: " + node.text + " | " + " id: " + node.id);
}
}
});

 

到此一个动态树就完成了，欢迎大家提意见。

转载于:https://www.cnblogs.com/xqhppt/archive/2010/05/18/1738680.html