最近在学习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);
}
}
});
到此一个动态树就完成了,欢迎大家提意见。