在 GridView 控件中添加一列复选框51
簡介
在前面的教程中 , 我們學習了如何為 GridView 控件添加一列 單選 按鈕來選擇一個特定的記錄。當用戶被限制最多只能從網格中選中一項時,一列單選按鈕是一個非常恰當的用戶界面。然而,有時我們還想讓用戶從網格中隨便選擇任意數量的項目。例如,基于 Web 的電子郵件客戶端通常使用一列復選框控件來顯示郵件列表。用戶可以從中隨意選擇若干個郵件后執行某些操作,例如把這些郵件移動到另一個文件夾中或刪除這些郵件。
在本教程中 , 我們將了解怎樣添加一列復選框 , 以及如何確定回傳時哪些復選框被選中。尤其是我們還將創建一個例子,這個例子逼真地模仿了基于 Web 的電子郵件客戶端用戶界面。我們的例子將會包含一個已分頁的 GridView 控件,這個控件列出了 Products 數據庫中的所有產品,并且每個產品行都有一個復選框(參見圖 1 )。單擊 “Delete Selected Products” 按鈕后,將會刪除被選中的產品。
圖1 :每個產品行都包含了一個 復選框
步驟1 : 添加一個列出產品信息的分頁的GridView 控件
在考慮如何添加一列 復選框 之前 , 讓我們先關注一下如何在支持分頁的 GridView 控件中列出產品信息。首先,打開 EnhancedGridView 文件夾中的 CheckBoxField.aspx 頁,然后將一個 GridView 控件從工具箱中拖放到設計器中,并將其 ID 設置為 Products 。接下來,把 GridView 控件綁定到一個名為 ProductsDataSource 的新 ObjectDataSource 上。將 ObjectDataSource 配置使用 ProductsBLL 類,即調用 GetProducts() 方法返回數據。因為這個 GridView 控件是只讀的,所以在 UPDATE 、 INSERT 和 DELETE 選項卡中將下拉列表的設置為 “(None)” 。
圖2 :?創建一個名為 ProductsDataSource 的新 ObjectDataSource
圖3 :配置 ObjectDataSource 以便使用 GetProducts() 方法返回數據
圖4 :?將 UPDATE 、INSERT 和 DELETE 選項卡中的下拉列表設置為 “(None)”
完成Configure Data Source 向導后 ,Visual Studio 將會自動為與產品相關的的數據域創建BoundColumns 和 CheckBoxColumn 。與我們在前面教程中所做的一樣,除了 ProductName 、 CategoryName 和 UnitPrice BoundField 外,刪除所有其他 BoundField ,并將 HeaderText 屬性更改為 “Product” 、 “Category” 和 “Price” 。配置 UnitPrice BoundField ,以便將它的值格式化為貨幣形式。再通過從智能標記上選中 “Enable Paging” 復選框將 GridView 配置為 支持分頁。
另外 , 我們還要添加用來刪除選定產品的用戶界面。在 GridView 控件的下方添加一個 Web 按鈕控件,將其 ID 設置為 DeleteSelectedProducts ,將其 Text 屬性設置為 “Delete Selected Products” 。本例子中不是將產品從數據庫中實際刪除,而是要顯示一條消息指出將要被刪除的產品。為了實現這個目的,需要在 Button 控件下方添加一個 Web 標簽控件,將其 ID 設置為 DeleteResults ,清除它的 Text 屬性,并將它的 Visible 和 EnableViewState 屬性值設置為 False 。
完成這些更改之后 ,GridView 控件、ObjectDataSource 控件、Button 控件和 Label 控件的聲明標記應類似如下 :
<p>?????<asp:GridView?ID="Products"?runat="server"?AutoGenerateColumns="False"??
????????DataKeyNames="ProductID"?DataSourceID="ProductsDataSource"??
????????AllowPaging="True"?EnableViewState="False">?
????????<Columns>?
????????????<asp:BoundField?DataField="ProductName"?HeaderText="Product"??
????????????????SortExpression="ProductName"?/>?
????????????<asp:BoundField?DataField="CategoryName"?HeaderText="Category"??
????????????????ReadOnly="True"?SortExpression="CategoryName"?/>?
????????????<asp:BoundField?DataField="UnitPrice"?DataFormatString="{0:c}"??
????????????????HeaderText="Price"?HtmlEncode="False"??
????????????????SortExpression="UnitPrice"?/>?
????????</Columns>?
????</asp:GridView>?
?
????<asp:ObjectDataSource?ID="ProductsDataSource"?runat="server"??
????????OldValuesParameterFormatString="original_{0}"??
????????SelectMethod="GetProducts"?TypeName="ProductsBLL">?????????????
????</asp:ObjectDataSource>?
</p>?
<p>?
????<asp:Button?ID="DeleteSelectedProducts"?runat="server"??
????????Text="Delete?Selected?Products"?/>?
</p>?
<p>?
????<asp:Label?ID="DeleteResults"?runat="server"?EnableViewState="False"??
????????Visible="False"></asp:Label>?
</p>
花點時間在瀏覽器中瀏覽一下這個頁面 ( 參見圖5 ) 。此時 , 您應該看到前十個產品的名稱、類別和價格信息。
圖5 :?列出的前十個產品的名稱、類別和價格信息
步驟2 : 添加一列復選框
因為ASP.NET 2.0 包含了 CheckBoxField , 有些人會想到使用它來為 GridView 控件添加一列 復選框 。但實際情況并非這樣,因為 CheckBoxField 只對 Boolean 數據域起作用。也就是說,為了能夠使用 CheckBoxField ,我們必須指定一個基礎數據字段,然后通過查詢該字段的值來確定已呈現的復選框是否被選中。我們不能使用 CheckBoxField 來包含一列未選中的復選框。
取而代之 , 我們必須添加一個 TemplateField ,并 為其 ItemTemplate 添加一個 CheckBox Web 控件。繼續進行,為 Products GridView 添加一個 TemplateField ,使它成為第一個(最左邊的)字段。在 GridView 的智能標記中單擊 “Edit Templates” 鏈接,接著將一個 CheckBox Web 控件從工具箱拖放到 ItemTemplate 中。將該 CheckBox 控件的 ID 屬性設置為 ProductSelector 。
圖6 :?為 TemplateField 的 ItemTemplate 添加一個名為ProductSelector 的 CheckBox Web 控件
添加了TemplateField 和 CheckBox Web 控件后 , 每行都包含了一個復選框。圖7 顯示的這個畫面就是在添加 TemplateField 和CheckBox 后 , 通過瀏覽器看到的畫面。
圖7 :?現在每個產品行都包含一個 復選框
步驟3 : 回傳確定哪些復選框被選定
雖然現在我們已經有了一列復選框 , 但是我們還是沒有辦法確定回傳選中的那些 復選框 。因為單擊 “Delete Selected Products” 按鈕時,我們需要知道哪些復選框被選中,從而將這些產品刪除。
GridView 的?Rows 屬性?提供了一種訪問 GridView 中行的途徑。我們可以循環遍歷這些行,通過編碼訪問 CheckBox 控件,然后通查詢它的 Checked 屬性來確定這個 CheckBox 是否被選中。
為DeleteSelectedProducts Web 按鈕控件的Click 事件創建一個Event Handler , 并添加以下代碼 :
protected?void?DeleteSelectedProducts_Click(object?sender,?EventArgs?e)?{?
????bool?atLeastOneRowDeleted?=?false;?
?
????//?Iterate?through?the?Products.Rows?property?
????foreach?(GridViewRow?row?in?Products.Rows)?
????{?
????????//?Access?the?CheckBox?
????????CheckBox?cb?=?(CheckBox)row.FindControl("ProductSelector");?
????????if?(cb?!=?null?&&?cb.Checked)?
????????{?
????????????//?Delete?row!?(Well,?not?really...)?
????????????atLeastOneRowDeleted?=?true;?
?
????????????//?First,?get?the?ProductID?for?the?selected?row?
????????????int?productID?=??
????????????????Convert.ToInt32(Products.DataKeys[row.RowIndex].Value);?
?
????????????//?"Delete"?the?row?
????????????DeleteResults.Text?+=?string.Format(?
????????????????"This?would?have?deleted?ProductID?{0}<br?/>",?productID);?
????????}?
????}?
?
????//?Show?the?Label?if?at?least?one?row?was?deleted...?
????DeleteResults.Visible?=?atLeastOneRowDeleted;?
}
Rows 屬性會返回一個 GridViewRow 實例集合 , 這個集合組成了 GridView 控件的各個數據行 , 這里的 For Each 循環逐一列舉了集合中的各個數據行元素。對每個GridViewRow 對象來說 , 使用row.FindControl("controlID") 方法通過編碼來訪問每行的 Checkbox 控件。如果 CheckBox 控件被選中,那么就會從 DataKeys 集合中返回該行相應的 ProductID 值。在本練習中,我們只是在 DeleteResults Label 中簡單地顯示了一些信息性消息,而在一個實際應用程序中,我們將改為調用 ProductsBLL 類的 DeleteProduct(productID) 方法。
添加了這個 Event Handler 后 , 單擊 “Delete Selected Products” 按鈕 , 現在就會顯示選中產品的 ProductID 。
圖8 :?單擊 “Delete Selected Products” 按鈕時 , 列出了選中產品的ProductID
步驟4 : 添加“Check All” 和“Uncheck All” 按鈕
如果用戶想刪除當前頁面上的所有產品 , 他們必須選中每一頁面上的 10 個 復選框 。我們可以幫助他們快速實現這個操作,而這一切只需添加一個 “Check All” 按鈕。單擊這個按鈕后,會選中網格中的所有復選框。而 “Uncheck All” 按鈕同樣有用。
在頁面中添加兩個 Web 按鈕控件,把它們放在 GridView 控件的上面。將第一個按鈕的 ID 屬性設置為 CheckAll ,將它的 Text 屬性設置為 “Check All” ;將第二個按鈕的 ID 設置為 UncheckAll ,將它的 Text 屬性設置為 “Uncheck All” 。
<asp:Button?ID="CheckAll"?runat="server"?Text="Check?All"?/>? ?
<asp:Button?ID="UncheckAll"?runat="server"?Text="Uncheck?All"?/>
接下來 , 在代碼文件類中創建一個名為ToggleCheckState(checkState) 的方法 , 當這個方法被調用時 , 會逐一列舉Products GridView 控件的行 Rows 集合, 然后將每行的CheckBox 控件的Checked 屬性設置為傳進的?checkState?的參數值。
private?void?ToggleCheckState(bool?checkState)?{?
????//?Iterate?through?the?Products.Rows?property?
????foreach?(GridViewRow?row?in?Products.Rows)?
????{?
????????//?Access?the?CheckBox?
????????CheckBox?cb?=?(CheckBox)row.FindControl("ProductSelector");?
????????if?(cb?!=?null)?
????????????cb.Checked?=?checkState;?
????}?
}
接下來 , 為CheckAll 按鈕和 UncheckAll 按鈕創建 Event Handler 。在 CheckAll 的 Event Handler 中 , 只需簡單調用ToggleCheckState(true) 方法 ; 而在UncheckAll 的Event Handler 中 , 需要調用ToggleCheckState(False) 方法。
protected?void?CheckAll_Click(object?sender,?EventArgs?e)?{?
????ToggleCheckState(true);?
}?
?
protected?void?UncheckAll_Click(object?sender,?EventArgs?e)?
{?
????ToggleCheckState(false);?
}
有了這些代碼 , 單擊“Check All” 按鈕時 , 會引起回傳 , 并會選中 GridView 中的所有 復選框 。同樣,單擊 “Uncheck All” 會取消選中所有復選框。圖 9 顯示的是單擊 “Check All” 按鈕后的屏幕。
圖9 :?單擊 “Check All” 按鈕 , 選中所有 復選框
注意 :?當顯示一列 復選框 時 , 有一種方法可以用來全選中或全不選中所有的 復選框, 那就是選中或不選中標題行的 復選框 。還有,通常 “Check All”/“Uncheck All” 的執行需要一個回傳。盡管這些復選框能被選中還是不能被選中,完全可以通過客戶端腳本來實現,但這里仍然提供了一種令人耳目一新的用戶體驗。為了詳細探討使用標題行的復選框來實現 “Check All” 和 “Uncheck All” 功能,以及使用客戶端技術,請查閱?使用客戶端腳本和 Check All CheckBox 全部選中 GridView 中的復選框?。
小結
在需要讓用戶可以從 GridView 控件中選擇任意數量的行之前 , 首先需要添加一列復選框。正如我們在本教程中所了解的那樣,要在 GridView 控件中包含一列復選框,必須添加一個帶有 CheckBox Web 控件的 TemplateField 。通過使用 Web 控件(與向模板中直接插入標記文字相反,正如我們在前面教程中所做的那樣), ASP.NET 能夠在整個回傳期間自動記住哪些 CheckBox 控件被選中,哪些沒有被選中。我們還可以通過編碼訪問這些 CheckBoxes 控件,以便確定給的的 CheckBox 控件是否被選中,或選中狀態是否被更改。。
本教程和上一個教程都著眼于為 GridView 控件添加一行選擇器列。在下一個教程中,我們將會詳細探討如何以最小的工作量為 GridView 控件添加插入功能。
快樂編程!
轉載于:https://www.cnblogs.com/uddgm/articles/5451542.html
總結
以上是生活随笔為你收集整理的在 GridView 控件中添加一列复选框51的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux shell 常用基本语法
- 下一篇: hdu5343 后缀自动机+dp