C#基礎回顧：GridView全選示範

      要實現的效果:

      方法一:

      首先,你需要添加一列,用於放置複選框.如果你比較熟練,可以直接通過手動寫代碼來實現.如果,你還比較生疏，那麼就進入設計頁面,選擇你的GridView控制項.點擊右上方的三角尖:

      選擇編輯列:

      添加一個模板列TemplateField.然後,切換到原始碼進行後續的編輯.在你的GridView控制項中剛剛產生的 <asp:TemplateField> </asp:TemplateField>標籤對之間,添加一個<HeaderTemplate></HeaderTemplate>標籤對和<ItemTemplate></ItemTemplate>標籤對.這兩個是什麼意思呢?按照字面理解,應該是頭模板和項目模板.聯想一下我們的GridView控制項,是不是有一個Header用來顯示列名之類的資訊,而Header之下都是我們從資料來源擷取的資料行呢?(當然,還有其它情況,這裡不做討論).如果你想明白了,那應該已經猜到這兩個標籤對是做什麼用的了.我們要利用<HeaderTemplate>在列頭處顯示一個checkbox,用這個checkbox來觸發全選和全不選的事件.而在<ItemTemplate>中添加的checkbox則會顯示在每一條資料行中.下面來看原始碼:

<asp:GridView ID="GridView1" runat="server">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox runat="server" ID="cbHead" OnCheckedChanged="SelectAll" AutoPostBack="true">
                </asp:CheckBox>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox runat="server" ID="cbItem"></asp:CheckBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

      上面的代碼相信大家肯定看明白了,那如何來實現全選和全不選呢?這就需要編輯SelectAll方法,因為當我們點選了列頭的checkbox就會觸發OnCheckedChanged事件,而我們讓該事件調用SelectAll方法,利用該方法來實現效果.要添加該事件,首先要在原始碼中添加OnCheckedChanged="SelectAll" AutoPostBack="true" 語句,就如上面所給的代碼一樣.AutoPostBack屬性必須設定為true(預設為false),因為我們需要在點選該checkbox後,就讓其它資料行的checkbox也選中,也就是說必須告訴伺服器"我已經選中了",只有當伺服器接收到該訊息,才會執行SelectAll方法.而AutoPostBack屬性就是用於設定回傳的,如果設定為true,表是點選該按鈕後,就會將訊息傳給伺服器端,否則就不會將訊息傳給伺服器.
      囉嗦了一大堆後,繼續回來.SelectAll方法如下:

SelectAll
protected void SelectAll(object sender, EventArgs e)
{
    bool isChecked = ((CheckBox)(GridView1.HeaderRow.Cells[0].FindControl("cbHead"))).Checked;
    foreach (GridViewRow gvRow in GridView1.Rows)
    {
        ((CheckBox)(gvRow.Cells[0].FindControl("cbItem"))).Checked = isChecked;
    }
}

      這樣,便實現了預定的效果. [備忘：GridView資料呈現形式有點像Excel，也是由行列組成，每一行又由許多儲存格組成，在每一個儲存格內又可以放置任意多的東西（包括控制項），因此如果我們想要得到GridView某行某列的某個控制項，就要用GridView.Rows[index].Cells[index].Controls[index]之類的方式]

      方法二:

      但是,很明顯,採用postBack方式並不是最好的,每次點選都會產生一次回傳,伺服器都需要進行處理,這對伺服器效能影響是很大的.(一個使用者可能還感覺不出來,如果有上千個使用者呢?).因此,最好的辦法,就是讓用戶端自己去處理選中的事件.這就需要js來幫忙.

selectAll
<script language="javascript" type="text/javascript">
function selectAll(ctlName,bool)
{
   var ctl = document.getElementById(ctlName);//根據控制項的在用戶端所呈現的ID擷取控制項
   var checkbox = ctl.getElementsByTagName('input');//擷取該控制項內標籤為input的控制項
   /*所有Button、TextBox、CheckBox、RadioButton類型的伺服器端控制項在解釋成Html控制項後，都為<input type=''./>，通過type區分它們的類型。*/
   for(var i=0;i<checkbox.length;i++)
   {
       if(checkbox[i].type=='checkbox')
       {
            checkbox[i].checked = bool;
        }
    }
}
</script>

      把上述js代碼添加到Head標籤中.然後對GridView原始碼進行一些修改,去掉OnCheckedChanged="SelectAll" AutoPostBack="true",添加onclick="javascript:selectAll('GridView3',this.checked);"用戶端事件.那麼現在,當你再點選列頭的checkbox時候就不會回傳給伺服器端處理了.

      方法三:

      有些朋友發現問題了,在上述的Js中,單純地通過checkbox[i].type=='checkbox'來做判斷,那不是意味著只要GridView控制項中有checkbox,就對它進行了賦值嗎,如果在其它列中也有複選框,那不是也受到連累了?
      因此上述方法只適合於只有一列複選框的情況,但是如果出現多列複選框,怎麼辦呢?
      我想到的方法就是通過名字來設定每一個複選框,也就是只有名字是符合的,我才對它進行操作.你可能會希望使用getElementsByName("checkbox名稱")來擷取控制項,但是會發現,這樣根本尋找不到控制項.因為asp.net中,為了防止繫結資料行在解釋成HTML後出現ID、Name相同的控制項,對每一個ID和NAME都進行了修改.大家可以參考這裡.因此,我們只能利用控制項的ClientID來擷取修改後的ID.於是我通過在cs代碼中註冊js指令碼來擷取到該ID.如果,對於我所說的還不理解,請仔細閱讀代碼.

註冊JS
private void RegisterScript(GridView gv)
{
    if (!ClientScript.IsStartupScriptRegistered("selectJSFor" + gv.ID))
    {
        string script = "<script language='javascript'>\n"
                     + "function selectAllFor" + gv.ID + "(bool)\n"
                     + "{\n";
        for (int i = 0; i < GridView3.Rows.Count; i++)
        {
            script += "document.getElementById('" + gv.Rows[i].Cells[0].FindControl("cbItem").ClientID + "').checked=bool;\n";
        }
        script += "}\n"
               + "</script>\n";
        ClientScript.RegisterStartupScript(this.GetType(), "selectJSFor" + gv.ID, script);
    }
}

 

      這樣,就基本可以滿足要求了.

      源檔案下載.(採用VS 2005開發)

作者：stg609
出處：http://stg609.cnblogs.com/
本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。