[藍(lán)]在ASP.NET頁(yè)面中使用TreeView控件

2010-08-28 10:48:27來源:西部e網(wǎng)作者:

一、            下載源碼

http://www.asp.net/IEWebControls/IEWebControls.exe

 

二、            安裝及編譯

1、執(zhí)行安裝文件后,在安裝目錄找到 build.bat”文件,用記事本將其打開。把“csc.exe”換成絕對(duì)路徑“C:\WINNT\Microsoft.NET\Framework\v1.1.4322\csc.exe”。保存后執(zhí)行(記得把“只讀”屬性去掉)。
 

 

\

 

    2、編譯完成后,在安裝目錄下可以看到“build”活頁(yè)夾﹐把該目錄下的“Runtime”子目錄里所有文件復(fù)制到“C:\Inetpub\wwwroot\webctrl_client\1_0”(若沒有,則自行創(chuàng)建。注意,在 IIS 中新建站點(diǎn)的話,必須把“webctrl_client”目錄復(fù)制到站點(diǎn)根目錄下)
 

\


 

 

 

三、            VS.NET 中使用

1、                打開 VS.NET 右擊“工具箱”→ 添加/刪除項(xiàng)目 瀏覽 選中上述編譯的文件“Microsoft.Web.UI.WebControls.dll”→ 確認(rèn)后即可看到添加的“TreeView”控件

 

 

 

 

\\\\
\

 

2、                 將“TreeView”控件拖入頁(yè)面 屬性 節(jié)點(diǎn)(Node)→ 添加根節(jié)點(diǎn)(或添加子節(jié)點(diǎn))\\\

 

 

四、            從數(shù)據(jù)庫(kù)讀取節(jié)點(diǎn)信息

保存節(jié)點(diǎn)信息的 Table 基本結(jié)構(gòu)為
\
 

 

1、全部讀取并一次性展現(xiàn)

    

           private void Page_Load(object sender, System.EventArgs e)

           {

                if(IsPostBack)

                {

                     return;

                }

                DBSystem.ExecuteSQL tmp = new DBSystem.ExecuteSQL("T");

                DataTable dt = tmp.GetDataTable("select * from TreeView");//從數(shù)據(jù)庫(kù)抓出數(shù)據(jù)

                this.AddNodes(dt,null,"0");   //添加節(jié)點(diǎn)

                this.TreeView1.SelectedNodeIndex="";   //不選中任何節(jié)點(diǎn)。

/*下一節(jié)將介紹如何修改TreeView.cs 源碼來取消默認(rèn)選中節(jié)點(diǎn)的方法*/

           }

 

           /// <summary>

           /// 添加節(jié)點(diǎn)及其包含的子節(jié)點(diǎn)

           /// </summary>

           /// <param name="dt">從數(shù)據(jù)庫(kù)抓出的 DataTable</param>

           /// <param name="node">將要添加子節(jié)點(diǎn)的父節(jié)點(diǎn)</param>

           /// <param name="id">父節(jié)點(diǎn)的 ID,“0 為根節(jié)點(diǎn)</param>

           private void AddNodes(DataTable dt,TreeNode node,string id)

           {

                DataRow[] rows = dt.Select("ParentID="+id); //篩選出屬于父節(jié)點(diǎn) node”的子節(jié)點(diǎn)集合

                foreach(DataRow dr in rows) //循環(huán)子節(jié)點(diǎn)集合

                {

                     TreeNode nd = new TreeNode();

                     nd.NavigateUrl=dr["URL"].ToString(); //設(shè)置瀏覽的網(wǎng)址

                     nd.NodeData=dr["NodeID"].ToString(); //存放節(jié)點(diǎn) ID

                     nd.Text=dr["NodeName"].ToString();   //設(shè)置節(jié)點(diǎn)名稱

                     this.AddNodes(dt,nd,nd.NodeData);    //遞歸,添加該節(jié)點(diǎn)的子節(jié)點(diǎn)

                     if(node==null || id=="0")

                     {

                           this.TreeView1.Nodes.Add(nd);    //添加至根節(jié)點(diǎn)

                     }

                     else

                     {

                           node.Nodes.Add(nd);              //添加子節(jié)點(diǎn)

                     }

                }

 

2、       展開節(jié)點(diǎn)時(shí)讀取該節(jié)點(diǎn)的數(shù)據(jù)

TreeView 控件屬性→ 自動(dòng)提交(AutoPostBack True
 

\

 

TreeView 控件屬性→ 事件 雙擊展開(Expand  

\

 

 

           privatee void Page_Load(object sender, System.EventArgs e)

           {

                if(!IsPostBack)

                {

                     this.AddSingleNode(null,"0"); //找出根節(jié)點(diǎn)

                }

                this.TreeView1.SelectedNodeIndex="";   //不選中任何節(jié)點(diǎn)

           }

 

           /// <summary>

           /// 展開節(jié)點(diǎn)時(shí),觸發(fā)的事件

           /// </summary>

           /// <param name="sender">TreeView 控件</param>

           /// <param name="e"></param>

           private void TreeView1_Expand(object sender, Microsoft.Web.UI.WebControls.TreeViewClickEventArgs e)

           {

                TreeNode nd = this.TreeView1.GetNodeFromIndex(e.Node); //找到觸發(fā)事件的節(jié)點(diǎn),即正在展開的節(jié)點(diǎn)

                if(nd.Nodes[0].NodeData=="") //第一次加載,即只有“正在加載……”這一項(xiàng)

                {

                     this.AddSingleNode(nd,nd.NodeData); //加載子節(jié)點(diǎn)

                }

           }

 

           /// <summary>

           /// 只查找、添加單個(gè)節(jié)點(diǎn)下的子節(jié)點(diǎn)

           /// </summary>

           /// <param name="node">需要添加子節(jié)點(diǎn)的 TreeNode</param>

           /// <param name="id">該節(jié)點(diǎn)的 NodeID </param>

           private void AddSingleNode(TreeNode node,string id)

           {

                if(node!=null && id!="0")

                {

                     node.Nodes.Clear();//清空節(jié)點(diǎn),主要是把“正在加載……”這一項(xiàng)移除

                }

                DBSystem.ExecuteSQL tmp = new DBSystem.ExecuteSQL("T");

                DataTable dt = tmp.GetDataTable("select * from TreeView where ParentID="+id);//從數(shù)據(jù)庫(kù)抓出數(shù)據(jù)

                foreach(DataRow dr in dt.Rows) //歷遍所有子節(jié)點(diǎn)

                {

                     TreeNode nd = new TreeNode();

                     nd.NavigateUrl=dr["URL"].ToString(); //設(shè)置瀏覽的網(wǎng)址

                     nd.NodeData=dr["NodeID"].ToString(); //存放節(jié)點(diǎn) ID

                     nd.Text=dr["NodeName"].ToString();   //設(shè)置節(jié)點(diǎn)名稱

 

                     TreeNode child = new TreeNode();     //此節(jié)點(diǎn)只作為“nd”展開的依據(jù),并無它意

                     child.Text="正在加載……";

                     nd.Nodes.Add(child);

                     if(node==null|| id=="0")

                     {

                           this.TreeView1.Nodes.Add(nd);    //添加至根節(jié)點(diǎn)

                     }

                     else

                     {

                           node.Nodes.Add(nd);              //添加子節(jié)點(diǎn)

                     }

                }

           }

五、            修改“TreeView.cs”源碼,取消 TreeView 默認(rèn)選中節(jié)點(diǎn)

1、TreeView.cs 文件

在文中﹐找到 protected override void OnLoad(EventArgs e)”事件

protected override void OnPreRender(EventArgs e) 事件,修改以下代碼

 

if ((SelectedNodeIndex == "" || SelectedNodeIndex == String.Empty) && Nodes.Count > 0)

           //SelectedNodeIndex = "0"; //修改前

           SelectedNodeIndex = "";    //修改后

 

2、TreeView.htc 文件

在“C:\Inetpub\wwwroot\webctrl_client\1_0\ TreeView.htc”中找到“function ondocumentready()”把以下代碼注釋掉

// verify selectedNodeIndex

/****************** Change By Jerry On 2005-01-25 ******************/

/*

if (getNodeFromIndex(selectedNodeIndex) == null) { if (getNodeFromIndex("0") != null) selectedNodeIndex = "0"; else selectedNodeIndex = ""; }

*/

/****************** Change By Jerry On 2005-01-25 ******************/

在“function tryToBuildTreeFromRoot()”修改以下代碼

if (selectedNodeIndex.length == 0)

                {

 //prop_selectedNodeIndex = "0";  //修改前

 prop_selectedNodeIndex = ""; //修改后

}

3、使用

修改“TreeView.cs”后,重新編譯一次,生成新的“Microsoft.Web.UI.WebControls.dll”。應(yīng)用時(shí)只需要設(shè)置“SelectedNodeIndex”為 “” 即可

              this.TreeView1.SelectedNodeIndex="";   //不選中任何節(jié)點(diǎn)。

 

六、            使用 XML 文檔創(chuàng)建 TreeView

1、XML 文檔的要求

a)      描述節(jié)點(diǎn)名稱是固定的“<treenodes></treenodes>”與“<treenode></treenode>

b)      雖然 XML 文文件對(duì)字母的大小寫嚴(yán)格區(qū)分,但綁定時(shí)會(huì)忽略

c)      <treenode></treenode>節(jié)點(diǎn)中的屬性,必須與 TreeView 控件中的 TreeNode 屬性對(duì)應(yīng)

d)      <treenode></treenode>”節(jié)點(diǎn)中的文本不能寫在節(jié)點(diǎn)內(nèi),只能以 Text”屬性出現(xiàn),如“<treenode>Node01</treenode>”行不通,應(yīng)為“<treenode Text="Node01"></treenode>

以下是一個(gè)可用于“TreeView”控件綁定源的范例﹕

<?xml version="1.0" encoding="utf-8" ?>

<TREENODES>

     <TREENODE Text="Node01">

           <TREENODE NavigateUrl="04.htm" Text="Node04"></TREENODE>

     </TREENODE>

     <treenode NavigateUrl="05.htm" text="Node05" NodeData="05" CheckBox="true"></treenode>

     <TREENODE NavigateUrl="03.htm" Text="Node03"></TREENODE>

</TREENODES>

2、綁定的代碼

                this.TreeView1.TreeNodeSrc="TreeXML.xml";

                this.TreeView1.DataBind();

 

關(guān)鍵詞:ASP.NET

贊助商鏈接: