富數據控件 GridView（定義列、格式化、樣式）

GridView      

       GridView 是一個用於顯示數據的極為靈活的網格控件。它有很多的易用性，包括選擇、分頁、排序和編輯，可以很方便的通過模版擴展。

       當把 GridView.AutoGenerateColumns 屬性設置為 true 時，GridView 使用反射來檢查數據對象並找到所有的字段或屬性，以發現的次序為它們逐個創建列。

       自動生成的列對於快速創建測試頁面很有效，但通常缺少必需的靈活性。如果你希望隱藏列，改變它的次序，或者希望配置顯示的某些方面，如格式化列的標題文字等等，在所有這些情形下，你需要把 AutoGenerateColumns 設為 false 並在 GridView 控件標簽的 <Columns>中定義列。

列的類型：

BoundField	顯示數據源字段的文本
ButtonField	為列表中每個項目顯示一個按鈕
CheckBoxField	為列表中每個項目顯示一個復選框（適用於 “真”或“假”這種數據類型）
CommandField	提供選擇或編輯按鈕
HyperLinkField	用超鏈接的形式顯示內容
ImageField	顯示二進制字段的圖像數據
TemplateField	允許你使用自定義模板指定多個字段、自定義控件以及任意的 HTML 。 它給你最大程度的控制度，同時需要你做最多的事工作。

       剛創建 GridView 時，AutoGenerateColumns 屬性為默認的 true，刷新架構后，AutoGenerateColumns 為 false，同時 VS 為在數據源中發現的每一個字段添加了一個 <asp:BoundField> 標簽。修改列對象的屬性可以很方便的調整列的次序、標題或者其他細節。移除標簽也可以隱藏不想顯示的列（但不想顯示的列最好不要讀取它們）。

       而顯式定義的列比自動生成的列運行快（因為需要再使用反射）。

       下面是一個顯式定義列的完整聲明：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataSourceID="sourceEmployees">
    <Columns>
        <asp:BoundField DataField="EmployeeID" HeaderText="ID" />
        <asp:BoundField DataField="FirstName" HeaderText="First Name" />
        <asp:BoundField DataField="LastName" HeaderText="Last Name" />
        <asp:BoundField DataField="Title" HeaderText="Title" />
        <asp:BoundField DataField="City" HeaderText="City" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource ID="sourceEmployees" runat="server"
    ConnectionString="<%$ ConnectionStrings:Northwind %>"
    ProviderName="System.Data.SqlClient"
    SelectCommand="select EmployeeID,FirstName,LastName,BirthDate,Title,City from Employees">
</asp:SqlDataSource>

       顯式聲明一個綁定字段的同時，還可以設置其他屬性，見下表：

DataField	要顯示的數據項的字段（對行而言）或屬性（對對象而言）
DataFormatString	用於格式化字段。在顯式正確格式的數字和日期時特別有用。
ApplyFormatInEditMode	即使在編輯模式下文本框中的值也會用格式化字符串來格式化（默認false）
HeaderText、FooterText HeaderImageUrl	當網格有標題行（GridView.ShowHeader 為 true）或注腳行（GridView.ShowFooter 為 true）時設置標題行和注腳行的文字。標題行也可以設置成圖片。
ReadOnly	為 true 時，列的內容在編輯模式不可改變，不提供任何編輯控件。
InsertVisible	為 false 時，列的值在新增模式時不可設置。
Visible	為 false 時，列不會顯示（也不會為它生成 HTML）
SortExpression	指定一個附加在查詢之后的表達式，用於執行基於該列的排序
HtmlEncode	為 true 時（默認值），所有文本都用 HTML 編碼以防止特殊字符破壞頁面。
NullDisplayText	值為空值時顯示的文本，默認是一個空字符串。可以硬編碼為其他字符串（如“未指定”）
ConvertEmptyStringToNull	為 true 時，編輯提交前把所有空字符串轉換成空值
ControlStyle、HeaderStyle FooterStyle、ItemStyle	覆蓋行的樣式，配置本列的外觀。

 

 

格式化 GridView

       格式化包含幾個相關的任務：

• 保證日期、貨幣、數值以合適的方式呈現。
• 希望網格的各個方面都能夠應用顏色、字體、邊框和對齊的完美組合。
• 可以截止事件，檢查行數據，並通過編程來格式化屬性。

提示：

       在網頁中創建一個包含滾動條的 GridView 很容易，將 GridView 放入一個 Panel 中，給 Panel 設置適當尺寸，並把 Panel.Scrollbars 設置為 Auto、Vertical、Both 之一即可。

 

1. 格式化字段

       格式化字符串通常由一個占位符和格式指示器組成，並被包含在一組花括號中。

       格式化字符串並不僅限於 GridView 使用，可以和其他控件使用，可用於模版中的數據綁定表達式，還可以作為很多方法的參數。

數字格式化字符串：

貨幣	{0:C}	$1,234.50       括號為負數：（$1,234.50）
科學計數法（指數）	{0:E}	1.234500E+003
百分百	{0:P}	45.6%
固定浮點數	{0:F?}	由 ? 決定小數的位數

 

時間和日期格式化字符串：

短日期	{0:d}	M/d/yyyy
長日期及短時間	{0:f}	dddd，MMMM，dd，yyyy HH:mm aa
長日期	{0:D}	dddd，MMMM，dd，yyyy
長日期及長時間	{0:F}	dddd，MMMM，dd，yyyy HH:mm:ss aa
ISO 排序標准	{0:s}	yyyy-MM-ddTHH:mm:ss
月和日	{0:M}	MMMM dd
一般	{0:G}	M/d/yyyy HH:mm:ss aa

 

2. 樣式

       GridView 公開了基於樣式的富格式化模型。樣式不是簡單的屬性，而是每個樣式公開了一個 Style 對象，該對象包含一組屬性，包括顏色選擇（ForeColor、BackColor）、增加邊框（BorderColor、BorderStyle、BorderWidth），調整行的尺寸（Height、Width），對齊行（HorizontalAlign、VerticalAlign）以及配置文字外觀（Font、Wrap）。

       這些樣式屬性幾乎允許你細化項目外觀的所有方面，見下表：

HeaderStyle	標題列的外觀
RowStyle	每個數據行的外觀
AlternatingRowStyle	交替行的數據行外觀
SelectedRowStyle	選中行的外觀
EditRowStyle	編輯行的外觀
EmptyDataRowStyle	配置一種特殊情況下只有單個空行時的外觀。通常出現在綁定數據對象不包含任何行的時候
FooterStyle	腳注行的外觀
PagerStyle	啟用分頁時，配置包含頁鏈接的行的外觀

 

以下是一個完全格式化的 GridView 控件：

<asp:GridView ID="GridView1" runat="server" DataSourceID="sourceEmployees" AutoGenerateColumns="False"
    Font-Names="Verdana" Font-Size="X-Small" ForeColor="#333333" CellPadding="4"
    GridLines="None">
    <HeaderStyle BackColor="#990000" Font-Bold="true" ForeColor="White" />
    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
    <AlternatingRowStyle BackColor="White" />

    <Columns>
        <asp:BoundField DataField="EmployeeID" HeaderText="ID">
            <ItemStyle Font-Bold="true" BorderWidth="1" />
        </asp:BoundField>
        <asp:BoundField DataField="FirstName" HeaderText="First Name" />
        <asp:BoundField DataField="LastName" HeaderText="Last Name" />
        <asp:BoundField DataField="City" HeaderText="City">
            <ItemStyle BackColor="LightSteelBlue" />
        </asp:BoundField>
        <asp:BoundField DataField="BirthDate" HeaderText="Birth Date" DataFormatString="{0:yyyy/MM/dd}" />
    </Columns>
</asp:GridView>

<asp:SqlDataSource ID="sourceEmployees" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>"
    ProviderName="System.Data.SqlClient" SelectCommand="select EmployeeID,FirstName,LastName,BirthDate,City from Employees">
</asp:SqlDataSource>

說明：

1. 使用 GridView 屬性設置字體並調整單元格間距和單元格的邊線。
2. 利用樣式加粗標題並配置行與交替行的背景。
3. 特定列的樣式設置不同的背景色來突出位置信息。
4. 加粗 ID 列。

3. 格式化特定值

       到目前為止，格式化還不夠精細，最細的時候也只是作用於單個列的值。如果希望格式化某個特定的行甚至某個單元格，該怎么辦呢？

       解決辦法是響應 GridView.RowDataBound 事件。該事件在網格的一部分（標題、腳注、分頁、普通數據行或交替數據行、選定項目）被創建時發生。

1. 訪問當前行時，將其視為 GridViewRow 控件。
2. GridViewRow.DataItem 屬性提供指定行的數據對象。
3. GridViewRow.Cells 集合可以讀取行的內容。
4. 通過 GridViewRow 可以改變顏色和對齊方式，增加或刪除子控件等。

示例：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string city = DataBinder.Eval(e.Row.DataItem, "City").ToString();
        if (city == "London")
        {
            e.Row.BackColor = System.Drawing.Color.LightPink;
            e.Row.ForeColor = System.Drawing.Color.Maroon;
        }
    }
}

 

 

提示：

       這里使用 DataBinder.Eval（）通過反射從數據項中讀取信息。還有一種選擇，可以把 e.Row.DataItem 轉換為正確的類型（如 ObjectDataSource 使用的 EmployeeDetails）、DataRowView（SqlDataSource 使用 DataSet 模式時）或者 DbDataRecord（SqlDataSource 使用 DataReader 模式時）。不過，DataBinder.Eval（）適用於所有這些場景（以速度略慢為代價）。

       顯然，利用 GridView.RowDataBound 事件還可以做出更多更富有想象力的事。