扩展 GridView 控件 - 无数据时显示标题列

摘要
当 GridView 系结的 DataSource 资料笔数为 0 时，会依 EmptyDataTemplate 及 EmptyDataText 的设定来显示无数据的状态。若我们希望 GridView 在无数据时，可以显示字段标题，有一种作法是在 EmptyDataTemplate 中手动在设定一个标题列，不过这种作法很麻烦。GridView 控件可不可以直接透过属性设定就可以在无数据显示字段标题呢？答案是肯定的，本文将扩展 GridView 控件来达成此需求。

扩展 GridView 控件
我们继承 GridView 命名为 TBGridView，新增一个 EmptyShowHeader 属性，来设定无数据时是否显示字段标题。覆写 CreateChildControls 方法，当 Mybase.CreateChildControls 传回 0 时，表示 DataSource 无数据，此时就呼叫 CreateEmptyTable 方法来建立无数据只显示标题的表格。
在 CreateEmptyTable 方法中，会复制 Columns 的集合，来输出所有字段的标题列。接下来会在标题列下方新增一列合并的数据列，用来显示无数据时的显示文字，即显示 EmptyDataText 属性值。

 1Imports System
 2Imports System.Collections.Generic
 3Imports System.ComponentModel
 4Imports System.Text
 5Imports System.Web
 6Imports System.Web.UI
 7Imports System.Web.UI.WebControls
 8Imports System.Drawing
 9
10Namespace WebControlsNamespace WebControls
11    < _
12    Description("TBGridView 控件"), _
13    ToolboxData("<{0}:TBGridView runat=server></{0}:TBGridView>") _
14    > _
15    Public Class TBGridViewClass TBGridView
16        Inherits GridView
17        Private FEmptyShowHeader As Boolean = True
18
19        /**/''' <summary>
20        ''' 无数据时是否显示字段标题。
21        ''' </summary>
22        Public Property EmptyShowHeader()Property EmptyShowHeader() As Boolean
23            Get
24                Return FEmptyShowHeader
25            End Get
26            Set(ByVal value As Boolean)
27                FEmptyShowHeader = value
28            End Set
29        End Property
30
31
32        /**/''' <summary>
33        ''' 建立子控件。
34        ''' </summary>
35        ''' <param name="dataSource">控件的数据来源。</param>
36        ''' <param name="dataBinding">true 指示子控件系结至数据，否则为 false。</param>
37        ''' <returns>建立的数据列数目。</returns>
38        Protected Overrides Function CreateChildControls()Function CreateChildControls(ByVal DataSource As System.Collections.IEnumerable, ByVal DataBinding As Boolean) As Integer
39            Dim iRowCount As Integer
40            Dim oTable As Table
41
42            iRowCount = MyBase.CreateChildControls(DataSource, DataBinding)
43            If Me.EmptyShowHeader AndAlso (iRowCount = 0) Then
44                oTable = CreateEmptyTable()
45                Me.Controls.Clear()
46                Me.Controls.Add(oTable)
47            End If
48        End Function
49
50        /**/''' <summary>
51        ''' 建立无数据只显示标题的表格。
52        ''' </summary>
53        Private Function CreateEmptyTable()Function CreateEmptyTable() As Table
54            Dim oTable As Table
55            Dim oGridViewRow As GridViewRow
56            Dim oCell As TableCell
57            Dim iCount As Integer
58            Dim e As GridViewRowEventArgs
59
60            oTable = MyBase.CreateChildTable()
61            iCount = Me.Columns.Count - 1
62
63            '建立标题列
64            oGridViewRow = MyBase.CreateRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal)
65            Dim oFields(iCount) As DataControlField
66            Me.Columns.CopyTo(oFields, 0)               '取得目前定义 Columns 复本
67            Me.InitializeRow(oGridViewRow, oFields)     '资料列初始化 
68            e = New GridViewRowEventArgs(oGridViewRow)
69            Me.OnRowCreated(e)                          '引发 RowCreated 事件
70            oTable.Rows.Add(oGridViewRow)
71
72            '建立空白的数据列
73            oGridViewRow = New GridViewRow(-1, -1, DataControlRowType.DataRow, DataControlRowState.Normal)
74            oCell = New TableCell()
75            oCell.ColumnSpan = oFields.Length
76            oCell.Width = Unit.Percentage(100)
77            oCell.Text = Me.EmptyDataText
78            oCell.HorizontalAlign = UI.WebControls.HorizontalAlign.Center
79            oGridViewRow.Cells.Add(oCell)
80            oTable.Rows.Add(oGridViewRow)
81
82            Return oTable
83        End Function
84
85    End Class
86End Namespace

测试程序
我们拖曳一个 TBGridView 控件至页面上，设定 EmptyShowHeader="True"。

1<bee:TBGridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
2            EmptyShowHeaer="True" EmptyDataText="沒有資料錄可顯示。" AllowPaging="True" DataKeyNames="EmployeeID" CellPadding="4" ForeColor="#333333" GridLines="None">

执行程序，当 GridView 有数据时的画面如下


而当 GridView 无数据时，就会显示字段列及无数据的显示文字(EmptyDataText)。