用嵌套的DataGrid实现主从式表的显示

用嵌套的 DataGrid 实现主从式表的显示

经过半年的 asp.net 学习和开发的实践,随着学会的东西在不断增加的同时也发现不会的东西也在不断地增加,尽管如此,在这段时间里还是或多或少地积累了一些个人的开发经验,最重要的是学会如何更加充分地利用已经知道的知识和技术来完成自己想要达到的目的。

如何实现主从式表的显示问题是我开发中所遇到的一个难题,在这个问题中还涉及到在 DataGrid 中使用复选框控件和定制 DataGrid 的单元格的问题。下面就这三个问题逐一进行解决。

** ** ** 一、在 DataGrid ** ** 中使用复选框控件 **

这个问题的解决有几种方式,我选用了一种既适用于复选框控件又适用于单选框控件的方式。具体实现如下:

为 DataGrid 创建一个 ButtonColumn ,或者创建一个模板列,在模板列中放入一个 Label 控件(注:这些控件的选择并不是唯一的)。然后在 DataGrid 的 ItemDataBound 事件过程中生成复选框控件(单选框控件)的 HTML 标记并设置其相应的属性,就可以实现在 DataGrid 表中进行多选(单选)的功能。生成复选框控件的 HTML 标记的语句如下:

1 If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then

2 Dim r As LinkButton

3 r = e.Item.Cells(2).Controls(0)

4 r.Text = "

1<input name="chbRights" type="checkbox" value='" &amp; strID &amp; "'/>

"

5 End If

这种情况下, checkbox 或 radio 不能自动进行状态的管理,需要手动维持状态,也就是在表单提交到服务器返回浏览器显示的时候能够显示出提交前所进行的最后选择。这一步的实现并不难,先通过 SelectResult = Request.Form("chbRights") 语句获得表单提交的选择结果,然后将上面的第 4 句作如下修改:

if SelectResult.IndexOf(strID) <> -1 then

r.Text = "

1<input checked="" name="chbRights" type="checkbox" value='" &amp; strID &amp; "'/>

"

else

r.Text = "

1<input name="chbRights" type="checkbox" value='" &amp; strID &amp; "'/>

"

end if

** ** ** 二、定制 DataGrid ** ** 的单元格 **

假设要完成的表格样式如下:

Header1

|

Header2

|

Header3

|

Header4

---|---|---|---

Item1

|

DataGrid1

Item2

|

DataGrid2

表 1

其中 Header 有 4 列,每个 Item 只有 2 列。

这个是在 DataGrid 的 ItemCreated 事件过程中来具体实现的。首先创建 Header ,对于以上表格而言,它的 Header 缺省的是和 Item 一样有 2 列。那么我们要先清除 Header 中缺省的单元格控件,然后逐一创建 Header1 、 Header2 、 Header3 、 Header4 四个单元格控件。具体实现如下:

1、 利用语句 e.Item.ItemType = ListItemType.Header 来找到 DataGrid 的 Header ;

2、 清除 Header 中的缺省控件;

e.Item.Controls.Clear()

3、 创建新的单元格控件,

dim cell0 as new TableCell

cell0.Controls.Add(new LiteralControl("Header1"))

e.Item.Controls.Add(cell0)

并可以通过以下语句对单元格的风格、背景、宽度、高度、位置等属性进行设置:

cell0.MergeStyle(dgAllRights.HeaderStyle)

cell0.BackColor = Color.FromName("#8faae7")

cell0.Width = Unit.Percentage(10)

cell0.Height = Unit.Pixel(intHeight)

cell0.HorizontalAlign = HorizontalAlign.Center

4、 重复第 3 步,创建其它三个单元格控件。

到此为止, Header 就创建好了,但是由于 Header 的改变,导致 Item 的列出现了变化,由 2 列变成了 4 列,所以我们需要进行 Item 的单元格合并操作,具体语句如下:

_ ' _ _ 设置 Item _ _ 第二列的 ColumnSpan _ _ 合并单元格属性 _

If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then

dim cell as TableCell

cell = e.Item.Cells(1)

cell.ColumnSpan = 3

end if

** ** ** 三、 DataGrid ** ** 嵌套显示主从式表 **

经过以上两个问题的解决,尤其是第二个问题的解决,可以说现在这个问题的实现就非常容易了。

首先为主 DataGrid 创建一个模板列,在该模板列中放置从 DataGrid 控件,从 DataGrid 控件的 ShowHeader 属性设为 false ,复选框控件的使用由从 DataGrid 控件来实现,而主 DataGrid 的表格形式要根据上述的第二个问题来定制。所以主 DataGrid 和从 DataGrid 控件的数据源也可以是不同的。然后根据自己的需要进行样式的设定,以下是最终形成的结果:

当然,除了这种方法以外,一定还有其它的方法可以实现,关键是多尝试,在不断尝试 的过程中一定会有一些意想不到的收获。

Published At
Categories with Web编程
Tagged with
comments powered by Disqus