我們知道DataGrid是非常強大的一個ASP.NET組件,我們可以用它表示非常豐富的信息.在論壇裡經常可以看見一些網友問一些關於該控件的問題,我雖不是什麼高手但是對DataGrid還是有一些了解,加上我比較喜歡學習所以我今天就將DataGrid和CheckBox的組合使用做一個簡單的描述.我們可能在寫程序的時候都遇到這種情況:需要選擇一個列表的所有項或者取消所有項的選擇來刪除這些列以及如何給用戶一個提示信息是否要刪除(改功能我在相關文檔裡描述過了),我也遇到這個問題.我解決它有2個方案分別描述如下:
解決方案一:
1. 使用一個頁面的CheckBox來完成這項艱巨的任務(誇張了),由於這個方法非常簡單所以我也就不寫代碼只是做一個簡單的描述就可以了.我們在我們頁面上的DataGrid的上面或者下面放置一個CheckBox控件,最好用Table來控制位置這樣看起來更加清楚.我們可以將這個CheckBox的AutoPostBack設置成true.這樣我們可以讓它提交服務器事件.很顯然我們想要利用服務器事件來實現這個功能,後面就是遍歷DataGrid的所有行來和CheckBox的Checked的選擇相一致.
2. 依然是使用服務器的事件來完成我們的工作,這次有些不同我們將這個CheckBox放到DataGrid中對應CheckBox的列的頁眉上(header).我們給這個模板列的題頭上添加一個CheckBox控件利用它來完成和1中相同的工作,只是過程稍微有些不同.首先我們需要一個DataGrid來表現我們的程序,該DataGrid在Html頁上的代碼如下:
<asp:datagrid id="grdServer" runat="server">
<Columns>
<asp:TemplateColumn>
<HeaderTemplate>
<asp:CheckBox id="chkAllServer" runat="server" AutoPostBack="True"></asp:CheckBox>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="chkDelServer" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="au_id" HeaderText="編號"></asp:BoundColumn>
// 只顯示主要的下面的不寫了……在grdClient中有綁定的詳細列
</asp:datagrid>
我們給HerderTemple添加了一個chkAllServer其中Server說明它是調用服務器端事件的.我們為了給這個控件添加事件必須在創建DataGridItem的時候給它添加事件代碼如下:
private void grdServer_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) {
if(e.Item.ItemType == ListItemType.Header){
CheckBox chk = (CheckBox)e.Item.FindControl("chkAllServer");
// 給頁眉上的CheckBox添加出發事件
chk.CheckedChanged +=new EventHandler(chk_CheckedChanged);
}
}
事件處理程序如下所示:
// 得到指定DataGrid的題頭的CheckBox對象
private CheckBox GetHeaderCheckBox(DataGrid grd){
CheckBox chk = null;
foreach (DataGridItem i in grd.Controls[0].Controls){
if(i.ItemType == ListItemType.Header){
chk = (CheckBox)i.FindControl("chkAllServer");
break;
}
}
return chk;
}
private void chk_CheckedChanged(object sender, System.EventArgs e) {
CheckBox chk = this.GetHeaderCheckBox(this.grdServer);
foreach (DataGridItem i in this.grdServer.Items){
CheckBox inChk = (CheckBox)i.FindControl("chkDelServer");
inChk.Checked = chk.Checked;
}
}
該事件處理程序將DataGrid裡面的所有的CheckBox的Checked變的和題頭的CheckBox的Checked的狀態一樣.
解決方案二:
這個方案對應上面的服務器事件主要是描述客戶端的事件.同樣也有兩個小的稍有不同的辦法.
1. 和方案一的1一樣,但是他是支持客戶端的選中腳本至於腳本的內容下面2中會詳細介紹.
2. 和解決方案一一樣我們將CheckBox依然放在Header裡面,稍有不同的是我們這次使用的是客戶端腳本.為了實現這個功能我們在頁面上放一個DataGrid如下:
<asp:datagrid id="grdClient" runat="server">
<Columns>
<asp:TemplateColumn>
<HeaderTemplate>
<asp:CheckBox id="chkAll" runat="server"></asp:CheckBox>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="chkDelete" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="au_id" HeaderText="編號"></asp:BoundColumn>
<asp:BoundColumn DataField="name" HeaderText="姓名"></asp:BoundColumn>
<asp:BoundColumn DataField="phone" HeaderText="電話"></asp:BoundColumn>
<asp:BoundColumn DataField="address" HeaderText="地址"></asp:BoundColumn>
<asp:BoundColumn DataField="city" HeaderText="城市"></asp:BoundColumn>
<asp:BoundColumn DataField="state" HeaderText="狀態"></asp:BoundColumn>
<asp:BoundColumn DataField="zip" HeaderText="郵編"></asp:BoundColumn>
</Columns>
</asp:datagrid>
為了實現客戶端腳本的功能我們還要為頁面添加Javascript腳本,腳本代碼如下:
<script language="javascript">
