最近在学习Ext,在园子里也看了好多别人的文章,今天自己动手来实现一个动态树。首先先看效果图吧
效果就如上面所示,接下来一步一步来实现吧!代码只贴关键部分!
第一 数据库表的设计 还是请大家看图
很简单的表,就不说了。
第二 数据层用Linq 文件是:TreeLinqAccess
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
public
List
<
TreeItem
>
GetTreeByPid(string pid)
{
var q = from t in db.TreeItem
where t.pid == pid
select t;
return q.ToList();
}
{
var q = from t in db.TreeItem
where t.pid == pid
select t;
return q.ToList();
}
第三 数据层与Ext的交互用ashx类型的一般处理程序
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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();
}
}
{
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里的方法
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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;
}
{
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代码
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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);
}
}
});
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);
}
}
});
到此一个动态树就完成了,欢迎大家提意见。