ASP.NET DataGrid 控制項深入研究
最後更新:2017-02-28
來源:互聯網
上載者:User
asp.net|datagrid|控制項 首先我們將從一個示範開始,在這個示範中我將使用一個按鈕點擊事件排序表格中的資料。然後介紹的是一組屬性——HyperlinkColumn、BottonColumn 和 BoundColumn,使用這些屬性可以為 DataGrid 添加一些有趣的自訂功能。
下面我們首先從上一次結束的地方——清單A開始。下面是清單A中代碼的輸出。
DataGrid 的輸出
要注意的第一個變化是表頭中的列名現在是可點擊的。自己運行一下這個樣本,你會發現在點擊每個欄位時,資料會自動排序。
現在我們看一下引發這個變化的代碼。首先我將介紹 strSortBy 變數,這個變數用於儲存排序參數的名字。Page_Load() 函數也已有改動:當頁面第一次被裝載時,id欄位被選作預設的排序參數。
下面建立 DataView 對象的一個執行個體,用於在運行時期改變排列順序。只要把這個屬性設定為要排序的列,DataView 就會替我們完成排序工作。
最後,使用 DataGird 控制項的一些新屬性將這些東西粘合到一起。AllowSorting啟用排序,而 OnSortCommand屬性指定在接收到一個排序請求時需要調用的事件處理器。第二個屬性已經設定為dgsuperheroes_Sort(),這個函數將在我們點擊頭部的欄位名時由 .NET 編譯器自動調用。在這個函數中,SortExpression屬性儲存被選作排序參數的欄位名,然後根據這個欄位重新綁定 DataGrid,從而實現排序。
向 DataGrid 中添加連結
接著,我們可以通過以下方式改進 DataGrid 的介面:只在前面展示資訊的摘要,並在 DataGrid 中插入一些超連結,然後在點擊這些連結時顯示詳細資料。清單B 展示了如何?這一效果,圖B 展示了相應的輸出:
圖B
在 DataGrid 中插入超連結
這裡 DataGrid 只包含兩列——第一列是 ID,第二列是名字。如果點擊任何一個名字,就會調出另外一個 ASP.NET 指令碼,顯示被選項的所有詳細資料。
在這個指令碼中最重要的東西是 AutoGenerateColumns 屬性。該屬性如果設為 false,那麼就可以保證 .NET 編譯器不會根據表的欄位自動產生 DataGrid 的列。
很明顯的問題是,然後該怎樣產生列?很簡單,使用 <Columns> 元素,這一元素將圍起需要顯示的列的定義。
第一種列是 <asp:BoundColumn> 類型,該類型允許我們將 DataGrid 的一資料行繫結到資料庫表的一個欄位。所需的欄位被賦予 <asp:BoundColumn> 元素的 DataField屬性。
然後,<asp: HyperLinkColumn> 元素允許我們插入一個特殊列,在該列中有 DataGrid 每一行的一個連結。DataTextField屬性控制列中要顯示的表欄位,DataNavigateFormatString屬性控制超連結的 URL 目標(注意 {0} 格式用於變數填補),DataNavigateUrlField屬性指定用於填補的資料庫欄位。
如果點擊超級英雄(super hero)的名字,會進入 more.aspx 指令碼,該指令碼以 id 作為一個 GET 參數傳遞,然後從資料庫中擷取資訊,並將資訊顯示在頁面上。
命令中心
前面的例子引入了一個包含超連結的列。現在,你將看到如何引入一個能夠在使用者點擊時運行自訂命令的列。比如說,當使用者點擊一個列時,在頁面上隱藏或者顯示一個元素。
首先,在前面建立的 DataGrid 中添加兩個列。第一個新列使用被選記錄的詳細資料填充另外一個 DataGrid(位於同一頁面),而第二個列用於在使用者點擊一個按鈕時顯示或隱藏這個新的 DataGrid。
清單C是產生的代碼,下圖是清單以中代碼的簡單輸出:
圖C
使用 DataGrid 顯示/隱藏詳細資料
指令碼中實際上包含兩個 DataGrid:第一個是“dgsuperheroes”,用於顯示超級英雄(superheroes)的名字,第二個是“dgsuperheroes_details”,用於顯示被選英雄的詳細資料。預設情況下,第二個 DataGrid 在頁面載入時是不可見的,因為其 Visible 屬性設定為 false。
現在回到“dgsuperheroes” DataGrid,你會發現我們已經把 AutoGenerateColumns 屬性設定為“false”並且引入了四個自訂欄:兩個用於記錄 ID 和名稱的 <asp:BoundColumn>,還有兩個用於儲存命令的 <asp:ButtonColumn>。
每個 <asp:ButtonColumn> 都有三個有用的屬性:HeaderText,控製表頭行顯示的文字;Text,控制每一行顯示的文字;CommandName,用於為每個命令指定一個唯一識別碼。
“dgsuperheroes” DataGrid定義還引入了 OnItemCommand 屬性,這個屬性指定在使用者點擊一個 <asp:ButtonColumn> 連結時被調用的事件處理器。在這個例子中,事件處理器叫做 SuperHero_Details(),它使用 CommandName 區分對“顯示詳細資料(Show Details)”和“隱藏詳細資料(Hide Details)”請求的調用。注意這裡顯式地將事件(作為事件處理器的一個輸入參數)轉型為一個 LinkButton。
分享你的 DataGrid 技巧和竅門
在學習完本文的這兩部分課程之後,我已經嘗試盡量深入地講解了 ASP.NET 中非常酷的 DataGrid 控制項的很多東西。此外還展示了如何使用最簡單的方法向 DataGrid 中添加排序列,之後我還快速地介紹了 DataGrid 控制項的三個有用但有點複雜的屬性:<asp:BoundColumn> 元素,用於將 DataGrid 資料行繫結到資料庫表的具體欄位;<asp:HyperLinkCommand> 元素,用於在 DataGrid 中插入超連結;<asp:ButtonColumn> 元素,使得將自訂命令引入到 DataGrid 中更加容易。不妨到Discussion Board 跟大家分享你最愛的 DataGrid 技巧或竅門。