树形图用于显示按照树形结构进行组织的数据,其用途比较广泛,如计算机中的文件系统(Windows中的资源管理器)、企业或公司的组成结构等。现在在ASP.NET中利用微软提供的Internet Explorer WebControls它使得网页上的树形图开发与在Windows下一样的方便,一样的功能强大,甚至更灵活。
1.下载地址
http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp 安装后,通过“自定义工具箱”->“.net框架组件”把TreeView添加到工具箱里
2.运行时无法显示
一般是TreeView的版本问题,最好下载英文版自动安装版本重新安装,安装前应该先到添加删除程序里卸掉原版本
3.显示格式出错(非树状显示)
TreeView要求客户端浏览器版本为IE5.5及以上
4.框架里使用TreeView
设置NavigateUrl、Target属性,可更新另外的Frame
5.找不到TreeNode类
使用TreeView,需要添加namespace:using Microsoft.Web.UI.WebControls;
6.遍历TreeView节点
下面是一个利用TreeView控件生成树状导航的示例。可以无限生成多级菜单。
树型结构表Para_Item
Item_ID(节点ID) Item_Name(节点名) Parent_ID(父结点ID)
1 All 0
2 aaa 1
3 bbb 1
4 aaa_1 2
5 bbb_1 3
//页面初始化
private void Page_Load(object sender, System.EventArgs e)
{
// 定义数据库连接
SqlConnection sqlConection_Tree = new SqlConnection();
//初始化连接字符串
sqlConection_Tree.ConnectionString= Session["ConnString"].ToString();
//打开连接
sqlConection_Tree.Open();
//获取Faq树形目录节点
SqlDataAdapter sqlDataAdapter_Tree = new SqlDataAdapter("select Item_id,Item_name,Parent_ID from Para_item",sqlConection_Tree);
DataSet DataSet_Tree=new DataSet();
sqlDataAdapter_Tree.Fill(DataSet_Tree);
this.ViewState["DataSet_Tree"]=DataSet_Tree;
//调用递归函数,完成树形结构的生成
AddTree(0, (TreeNode)null);
}
//递归添加树的节点 参数ParentID为树的最大父结点
public void AddTree(int ParentID,TreeNode pNode)
{
DataSet DataSet_Tree=(DataSet) this.ViewState["DataSet_Tree"];
DataView DataView_Tree = new DataView(DataSet_Tree.Tables[0]);
//过滤ParentID,得到当前的所有子节点 ParentID为父节点ID
DataView_Tree.RowFilter = "[Parent_ID] = " + ParentID;
//循环递归
foreach(DataRowView Row in DataView_Tree)
{
//声明节点
TreeNode Node=new TreeNode() ;
//绑定超级链接
Node.NavigateUrl = "List.aspx?Item_ID="+Row["Item_ID"].ToString();
//开始递归
if(pNode == null)
{
//添加根节点
Node.Text = Row["item_name"].ToString();
TreeView_Tree.Nodes.Add(Node);
Node.Expanded=true; //节点状态展开
AddTree(Int32.Parse(Row["item_id"].ToString()), Node); //再次递归
}
else
{
//添加当前节点的子节点
Node.Text = Row["item_name"].ToString();
pNode.Nodes.Add(Node);
Node.Expanded = true; //节点状态展开
AddTree(Int32.Parse(Row["item_id"].ToString()),Node); //再次递归
}
}
//关闭连接
sqlConection_Tree.Close();
}
生成的树型如下:
All
|-aaa
|-aaa_1
|-bbb
|-bbb_1
7.控制父结点的开/合状态
TreeView_Tree.GetNodeFromIndex("1").Expanded=false/true;
8.清除某个父结点下的所有子节点
TreeView_IndexLeft.GetNodeFromIndex("1").Nodes.Clear();
9.设置所选节点,如选中第二个节点
function SetSelNode()
{
TreeView_Tree.selectedNodeIndex="1";
}
10.得到所选节点的Text,ID或NodeData
function GetAttribute()
{
alert(TreeView_Tree.getTreeNode(TreeView_Tree.selectedNodeIndex).getAttribute("Text"));
}
//替换Text为ID或NodeData,可分别得到所选节点的ID或NodeData
11.修改节点属性,如修改第一个节点的Text
function ModifyNode()
{
var node=TreeView_Tree.getTreeNode("0");
node.setAttribute("Text","第一个节点");
}
12.添加节点
function AddNode()
{
var node=TreeView_Tree.createTreeNode();
node.setAttribute("Text","第一个节点");
TreeView_Tree.add(node);
}
13.TreeView 中的SelectedIndexChange不执行
AutoPostBack=true,SelectedIndexChange才能被执行。
14.判断 TreeView 的一个节点下是否有子节点
if(SelectNode.Nodes.Count==0)
{
//该节点没有字节点
}