用于标准SQL数据的CustomTreeView

分享于 

7分钟阅读

Web开发

  繁體

介绍

ASP.NET 1.0没有提供 Treeview 控件。 因为微软引入了 ASP.NET 2这样的控件,所以我想这是很多人所需要的。 仍然有一些特殊的TreeView 使用"标准"数据时使用不起作用: 这里 TreeView 需要一个实现 IHierarchicalEnumerable的数据源( 例如: 如果你想将这里 TreeView 绑定到SQL数据,则必须编写一些代码(。例如,你不能使用声明性语法,它是 ASP.NET's 标志功能)。 这里提供的CustomTreeView 提供了显示标准 DataView 数据的可能性,并且仍然可以从 ASP.NET's 声明性语法( 通过模板 NodeTemplate ) 中获益。

背景

CustomTreeView 是一个模板化数据绑定控件。 由于你将在中找到完整的详细信息,所以我不会解释这一工作。

使用代码

数据源

我将显示一个名为地理的table 数据。 这个 table 需要一个主键/外键关系。 这是创建由 Treeview 呈现的层次结构的关系。 在这里,GEO_PARENT引用GEO_ID来创建父关系。

Screenshot - ASP.NET_TreeView0.JPG

代码后面

来自地理的数据被存储到一个 DataView 中。 在 DataView 中创建一个 DataRelation,然后过滤器 RowFilter 选择最上面的节点。 下面是代码:

SqlDataAdapter da = new SqlDataAdapter("select * from GEOGRAPHY",
 ConfigurationManager.ConnectionStrings[1].ConnectionString);
DataSet ds = new DataSet();
da.Fill(ds, "geo");
ds.Relations.Add("FatherChild", ds.Tables["geo"].Columns["GEO_ID"],
 ds.Tables["geo"].Columns["GEO_PARENT"]);
myTree.DataSource = ds.Tables["geo"].DefaultView;
myTree.RowFilter = "GEO_PARENT is null";
myTree.RelationName = "FatherChild";
myTree.DataBind();

请注意,DataRelation 得到一个 NAME,这个 NAME 通过属性 RelationName 提供给 CustomTreeView

在Webform上

在这个例子中,我将显示一个包含国家。地区。城市的树。 以及链接和按钮的一些说明功能。 要在web上使用 CustomTreeView,必须首先对程序集进行 register:

<%@Registertagprefix="WCC"Namespace="WebCustomControls"Assembly="WebControls"%>

如果使用 Visual Studio,则必须在项目中添加对" WebControls.dll"的引用才能使该行正常工作。 然后:

<WCC:CustomTreeViewid=myTree runat="server"><NodeTemplate><%# (Container.DataItem as DataRow)["GEO_NAME"]%><%# String.Format("<a href="http://www.google.com/search?q={0}" 
 target="_blank">Google</a>",
 (Container.DataItem as DataRowView)[1])%><asp:ImageButtonrunat=server ID=BnSend ImageUrl="~/IMGs/Valid.gif"CommandArgument=<%# (Container.DataItem as DataRowView)[0] %>ImageAlign=AbsMiddle OnCommand=DoValid /></NodeTemplate></WCC:/NodeTemplate>

使用 NodeTemplate 类,你可以为每个节点添加任何控制。 这里模板将为每个节点实例化。

要展开/关闭节点,你必须单击"文件夹"图像( 有关示例,请参见 below )。 这样就可以在节点的内容上使用"单击"事件了。

图像

为了简单起见,图像的URL是硬编码的。 所有图片都位于" IMGs"放置在网站 根目录 下的目录中。 你可以在 /imgs 文件夹中提供适当的图像( 但要保留那些硬编码的名字) 来显示你自己的图像。 但是一定要保持" menu_bar_invisible.gif"图像的原样。 如果你决定使用自己的图像,请注意,所有图像必须具有相同的尺寸。 你还可以添加一些额外属性,以允许主机webform动态指定 url。 在 NodeTemplate 中添加一些控件时,确保用于呈现树分支的图像足够大,否则将显示下面的"断开":

Screenshot - ASP.NET_TreeView1.JPG

在这个例子中,图像的高度只有 16像素,而按钮至少需要 24像素。 这里,你必须提供你自己的大图像。

使用指导

有些事情需要解释。

m_lstColumnNeedVisualRendering

为了知道必须显示" menu_bar.gif"以及必须显示" menu_bar_invisible.gif",我们使用这个列表。 这些是用于可视化呈现树( 分支)的两个图像。 难度来自于一旦我们达到了节点的最后一个子节点,即使最后一个子节点有子级。

Screenshot - ASP.NET_TreeView2.JPG

例如当我们到达时,即使在法国的子节点也在欧洲,在"欧洲"下的垂直条在下停止。 m_lstColumnNeedVisualRendering 是布尔值列表,树结构中每个列的一个布尔值。 如果位于列表 i的元素是 true,则显示栏i,否则,将显示一个不可见的GIF。

m_listOpenedNodes

这里列表允许我们知道当用户提交 CustomTreeView的表单时,哪些节点被展开。 这样,我们可以在与客户端浏览器上完全相同的状态下呈现 CustomTreeView。 在生成HTML上,这里列表是存储字段( 隐藏字段) <输入 type=hidden。> 当用户展开某个节点时,JavaScript客户端代码将这里节点添加到列表( 如果用户随后关闭该节点,则将它的移除)。 在 postback 上,使用 Request.Form Collection 读取这里隐藏字段的内容。 这是因为. NET ( 因为它被动态添加到控件) 不处理隐藏的字段的viewstate。

Javascript

在每个节点下,所有子节点都被放置为一个。 如果节点的ID为 ,则为的SPAN ID。 节点的"文件夹"映像有一个 ID'image_ 我。'。 当用户单击某个节点时,JavaScript函数 ExpandNode 将显示/隐藏适当的SPAN,并更改文件夹图像以反映更改。

结束语

下面是输出:

Screenshot - ASP.NET_TreeView3.JPG

对于每个节点,添加了一个超链接,以允许用户显示该项的Google页面。 还添加了一个 ImageButton。 单击这里按钮时,这里按钮提交。 一旦 Click 事件处理了服务器端,树在用户的浏览器上显示为完全相同的状态。


数据  STA  STAN  standard  
相关文章