您的位置：首页 > 编程语言 > ASP

使用ASP.NET2.0的TreeView控件显示分层数据

2006-07-28 21:57 721 查看

[日期：2006-07-13]来源：作者：[字体：大中小]
使用ASP.NET2.0的TreeView控件显示分层数据
现在ASP.NET2.0即将发布正式版，我们－－ASP.NET2.0的开发人员――早已对它感兴趣。随着新框架的推出，ASP.NET2.0内置了一系列新的控件。在这些控件里，我个人较为喜欢的一个控件是TreeView控件。（本文发表于2005/10/31日，微软ASP.NET2.0于2005/11/7日正式推出，所以有上面的“即将发布正式版”一说）
微软曾经在ASP.NET2.0的前版本（ASP.NET1.X版）开放了一个开源代码控件－－IEWebControl，在该控件的基础上并吸收来自各方反馈，微软推出了基于.NET2.0的TreeView控件。TreeView并不仅仅被重写，它还包括一系列新的特性，例如它支持客户端的执行，节点的动态填充，事件回发，链接导航。

例子
我准备提供一个简单的例子来说明如何使用TreeView控件显示SQLServer数据库里的分层数据。完成分层这个工具并不需要数据库的额外支持，也就是TreeView应该捕获数据的分层结构来进行显示－－不论数据到底分了几层
我们假设有一个名称为TreeViewSampleDB数据库，其中包含SampleCategories数据库，该数据表结构如下：



注意：本例使用

现在，我们使用了TreeViewVB.aspx页面，下面的代码显示了对TreeView的使用
<asp:TreeView
ID="TreeView1"
ExpandDepth="0"
PopulateNodesFromClient="true"
ShowLines="true"
ShowExpandCollapse="true"
runat="server"/>

这段代码意味这我们设置TreeView的初始化伸展深度是一级节点。我们想使用客户端节点执行特殊的功能以便我们能够给我们的客户更好的提供使用服务。注意这里并未使用客户端回发。另外，如果节点有子节点，我们同样想在父节点和子节点之间显示连接线，并且使用伸展/收缩图标显示节点的状态。

下一步，我们查看一下后台代码文件TreeViewVB.aspx.vb。我们使用代码完成根节点的显示，下面是部分代码：
ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.Load

IfNotPage.IsPostBackThen

PopulateRootLevel()

EndIf

EndSub


PrivateSubPopulateRootLevel()

DimobjConnAsNewSqlConnection(_

"server=JOTEKE/SQLExpress;Trusted_Connection=true;DATABASE=TreeViewSampleDB")

DimobjCommandAsNewSqlCommand("selectid,title,(selectcount(*)FROMSampleCategories"_

&"WHEREparentid=sc.id)childnodecountFROMSampleCategoriesscwhereparentIDISNULL",_

objConn)


DimdaAsNewSqlDataAdapter(objCommand)

DimdtAsNewDataTable()

da.Fill(dt)


PopulateNodes(dt,TreeView1.Nodes)

EndSub


上面操作包括连接数据库，查询第一层节点（也就是父节点的ID为null），并利用PopulateNodes方法建立TreeNode对象，PopulateNodes代码如下：
PrivateSubPopulateNodes(ByValdtAsDataTable,_
ByValnodesAsTreeNodeCollection)
ForEachdrAsDataRowIndt.Rows
DimtnAsNewTreeNode()
tn.Text=dr("title").ToString()
tn.Value=dr("id").ToString()
nodes.Add(tn)

'Ifnodehaschildnodes,thenenableon-demandpopulating
tn.PopulateOnDemand=(CInt(dr("childnodecount"))>0)
Next
EndSub

这段代码是重要的逻辑处理片段，PopulateNodes方法循环DataTable里的所有行，并且如果给定的节点具有子节点，它将设置PopulateOnDemand属性为true。这样如果节点具有子节点，将使用伸展/收缩图标进行状态显示。
下一步，我们建立代码给定节点的子节点，也就是用户单击父节点的子节点，代码如下
PrivateSubPopulateSubLevel(ByValparentidAsInteger,_
ByValparentNodeAsTreeNode)
DimobjConnAsNewSqlConnection(_
"server=JOTEKE/SQLExpress;Trusted_Connection=true;DATABASE=TreeViewSampleDB")
DimobjCommandAsNewSqlCommand("selectid,title,(selectcount(*)FROMSampleCategories"_
&"WHEREparentid=sc.id)childnodecountFROMSampleCategoriesscwhereparentID=@parentID",_
objConn)
objCommand.Parameters.Add("@parentID",SqlDbType.Int).Value=parentid

DimdaAsNewSqlDataAdapter(objCommand)
DimdtAsNewDataTable()
da.Fill(dt)
PopulateNodes(dt,parentNode.ChildNodes)
EndSub

上面代码片段执行的思路和Root定级一样，不过稍微的区别是只有给定的子节点进行查询和填充，触发指定节点的事件如下：
ProtectedSubTreeView1_TreeNodePopulate(ByValsenderAsObject,_
ByValeAsSystem.Web.UI.WebControls.TreeNodeEventArgs)HandlesTreeView1.TreeNodePopulate
PopulateSubLevel(CInt(e.Node.Value),e.Node)
EndSub

也就是，当触发OnTreeNodePopulate事件时，执行TreeView1_TreeNodePopulate方法（OnTreeNodePopulate="TreeView1_TreeNodePopulate"），TreeNodePopulate事件将在用户第一次展开父节点时触发。由于PopulateNodesFromClient（TreeView）和PopulateOnDemand（TreeNode）的设置，这样使得ASP.NET页面框架能够捕获客户端的回调，这使得完成回调并不一定非要数据回发。并且由于ASP.NET2.0提供的更好的跨浏览器支持，这样的工作在其它浏览器里，例如FireFox中，工作的也很好。
注意：用户单击节点并未导致数据的回发，因为我并未修改选择节点的数据。
到此，运行上面结果，可以看到运行结果如下图



这段代码涉及TreeView两个成员，您可以到MSDN查看它们的说明：

TreeView.OnTreeNodePopulate方法
http://msdn2.microsoft.com/zh-CN/library/system.web.ui.webcontrols.treeview.ontreenodepopulate.aspx

TreeView.PopulateNodesFromClient属性
http://msdn2.microsoft.com/zh-CN/library/system.web.ui.webcontrols.treeview.populatenodesfromclient.aspx

总结
到这里我们相当简单的完成了TreeView的演示。这个方法需要一些编码，当然在使用TreeView显示分层数据方面编码并不是必须的。在显示分层数据方面，对于代码的编写，TreeView给我们提供了很大的活动控件。不过，我相信通过代码了解TreeView技术是学习它的最好方式。

代码下载
本文源代码附带了VB和C#语言两个版本。运行时可以运行TreeViewDBSQLSchema.sql和TreeViewDBSQLData.sql建立数据库，也可以使用TreeViewSampleDB.BAK文件还原数据库。单击下面链接下载本文源代码

upload/2006_07/06071311109164.zip

源文地址
http://aspalliance.com/732

版权所有，转载请注明处出http://www.cnmaster.net。如需商业使用请联系本站站长
SQLServer2000数据库，如果您使用的是SQLServer2005或者SQL2000以前版本的数据库，本例子同样适用。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航