擴展 GridView 控制項 - 無資料時顯示標題列
摘要
當 GridView 繫結的 DataSource 資料筆數為 0 時，會依 EmptyDataTemplate 及 EmptyDataText 的設定來顯示無資料的狀態。若我們希望 GridView 在無資料時，可以顯示欄位標題，有一種作法是在 EmptyDataTemplate 中手動在設定一個標題列，不過這種作法很麻煩。GridView 控制項可不可以直接透過屬性設定就可以在無資料顯示欄位標題呢？答案是肯定的，本文將擴展 GridView 控制項來達成此需求。
擴展 GridView 控制項
我們繼承 GridView 命名為 TBGridView，新增一個 EmptyShowHeader 屬性，來設定無資料時是否顯示欄位標題。覆寫 CreateChildControls 方法，當 Mybase.CreateChildControls 傳回 0 時，表示 DataSource 無資料，此時就呼叫 CreateEmptyTable 方法來建立無資料只顯示標題的表格。
在 CreateEmptyTable 方法中，會複製 Columns 的集合，來輸出所有欄位的標題列。接下來會在標題列下方新增一列合併的資料列，用來顯示無資料時的顯示文字，即顯示 EmptyDataText 屬性值。
Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Drawing
Namespace WebControls
< _
Description("TBGridView 控制項"), _
ToolboxData("<{0}:TBGridView runat=server></{0}:TBGridView>") _
> _
Public Class TBGridView
Inherits GridView
Private FEmptyShowHeader As Boolean = True
''' <summary>
''' 無資料時是否顯示欄位標題。
''' </summary>
Public Property EmptyShowHeader() As Boolean
Get
Return FEmptyShowHeader
End Get
Set(ByVal value As Boolean)
FEmptyShowHeader = value
End Set
End Property
''' <summary>
''' 建立子控制項。
''' </summary>
''' <param name="dataSource">控制項的資料來源。</param>
''' <param name="dataBinding">true 指示子控制項繫結至資料，否則為 false。</param>
''' <returns>建立的資料列數目。</returns>
Protected Overrides Function CreateChildControls(ByVal DataSource As System.Collections.IEnumerable, ByVal DataBinding As Boolean) As Integer
Dim iRowCount As Integer
Dim oTable As Table
iRowCount = MyBase.CreateChildControls(DataSource, DataBinding)
If Me.EmptyShowHeader AndAlso (iRowCount = 0) Then
oTable = CreateEmptyTable()
Me.Controls.Clear()
Me.Controls.Add(oTable)
End If
Return iRowCount
End Function
''' <summary>
''' 建立無資料只顯示標題的表格。
''' </summary>
Private Function CreateEmptyTable() As Table
Dim oTable As Table
Dim oGridViewRow As GridViewRow
Dim oCell As TableCell
Dim iCount As Integer
Dim e As GridViewRowEventArgs
oTable = MyBase.CreateChildTable()
iCount = Me.Columns.Count - 1
'建立標題列
oGridViewRow = MyBase.CreateRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal)
Dim oFields(iCount) As DataControlField
Me.Columns.CopyTo(oFields, 0) '取得目前定義 Columns 複本
Me.InitializeRow(oGridViewRow, oFields) '資料列初始化
e = New GridViewRowEventArgs(oGridViewRow)
Me.OnRowCreated(e) '引發 RowCreated 事件
oTable.Rows.Add(oGridViewRow)
'建立空白的資料列
oGridViewRow = New GridViewRow(-1, -1, DataControlRowType.DataRow, DataControlRowState.Normal)
oCell = New TableCell()
oCell.ColumnSpan = oFields.Length
oCell.Width = Unit.Percentage(100)
oCell.Text = Me.EmptyDataText
oCell.HorizontalAlign = UI.WebControls.HorizontalAlign.Center
oGridViewRow.Cells.Add(oCell)
oTable.Rows.Add(oGridViewRow)
Return oTable
End Function
End Class
End Namespace測試程式
我們拖曳一個 TBGridView 控制項至頁面上，設定 EmptyShowHeader="True"。
<bee:TBGridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
EmptyShowHeaer="True" EmptyDataText="沒有資料錄可顯示。" AllowPaging="True" DataKeyNames="EmployeeID" CellPadding="4" ForeColor="#333333" GridLines="None">執行程式，當 GridView 有資料時的畫面如下
而當 GridView 無資料時，就會顯示欄位列及無資料的顯示文字(EmptyDataText)。
