No.18

在一些討論區常看到一些發問者，提問有關在GridView如何做全選功能的問題

索性就直接來寫個範例好了，其實做法還滿多種的，但我愛用土法練剛的方式

也就是靠使用者自己行撰寫code，而不用GridView的各種內建方式來達成，

主要也是從asp時代開始，己經寫習慣了，所以反而依靠一些程式精靈還不習慣勒

廢話不多說了，直接看範例

(1)先準備好以下元件
    a. GridView * 1

    b. SqlDataSource * 1

    c. Button * 1

    d. TextBox * 1

(2)在SqlDataSource 裡設定好連線及sql ( 你要用程式自行bind資料進去也可以，這裡由於只是個範例，所以就直接用精靈了)

     我直接使用SQL2005內建的資料庫AdventureWorks

     SELECT top 10 [Name], [ProductID], [ProductNumber] FROM production.product

(3)在GridView裡除了建出以上三個欄位之外，再增加一個TemplateField，並設定好HeaderTemplate及ItemTemplate

    各放入一個CheckBox元件，另外ItemTemplate裡再多放入一個HiddenField_Item用來得到每一筆資料的唯一值

01 <asp:TemplateField>  
02                    <HeaderTemplate>  
03                        <asp:CheckBox ID="CheckBox_All" runat="server" />  
04                    </HeaderTemplate>  
05                    <ItemTemplate>  
06                        <asp:CheckBox ID="CheckBox_Item" runat="server" />  
07                        <asp:HiddenField ID="HiddenField_Item" runat="server" />  
08                    </ItemTemplate>  
09 </asp:TemplateField>
10

(4)接著在Page_Load裡，撰寫SelectAll的JavaScript，看起來有點複雜其實不然，只是多了驗證及可支援不同物件裡的select判定而己

，自行稍稍研究一下應該就知道在寫些什麼囉！

ParentId：用來判定是哪一個物件裡的CheckBox

ChildId：用來判定是哪一個物件裡的CheckBox要被selected

01 JavaScript #region JavaScript  
02         string jstr = "<script type=\"text/javascript\"> \n" +  
03                     "function Check(parentChk,ParentId,ChildId) \n" +  
04                     "...{     \n" \n" +  
05                     "    var oElements = document.getElementsByTagName(\"INPUT\"); \n" +  
06                     "    var bIsChecked = parentChk.checked;      \n" +  
07                     "    for(i=0; i<oElements.length;i++)         \n" +  
08                     "    ...{                                        \n"   \n" +  
09                     "        if( IsCheckBox(oElements[i]) && IsMatch(oElements[i].id,ParentId, ChildId)) \n" +  
10                     "        ...{                                          \n"                                          \n" +  
11                     "            oElements[i].checked = bIsChecked;     \n" +  
12                     "        } +  
13                     "    } +  
14                     "} +  
15                     "function IsMatch(id, ParentId, ChildId) \n" +  
16                     "...{    \n"                        \n" +  
17                     "    var sPattern ='^'+ParentId+'.*'+ChildId+'$'; \n" +  
18                     "    var oRegExp = new RegExp(sPattern);       \n" +  
19                     "    if(oRegExp.exec(id))      \n" +  
20                     "         return true;         \n" +  
21                     "    else                      \n" +  
22                     "         return false;        \n" +  
23                     "} +  
24                     "function IsCheckBox(chk) \n" +  
25                     "...{                        \n"                              \n" +  
26                     "    if(chk.type == 'checkbox') \n" +  
27                     "        return true;           \n" +  
28                     "    else                       \n" +  
29                     "        return false;          \n" +  
30                     "} +  
31                     "</script> ";  
32         Page.RegisterClientScriptBlock("javascript", jstr);  
33         #endregion

(5)接著RowDataBound事件撰寫下列程式碼，用來註冊JavaScript到Select_All的CheckBox元件，以及把每一筆資料的唯一值放入HiddenField，在這裡我假設

Name是唯一值

01 if (e.Row.RowType == DataControlRowType.Header)  
02 ...{  
03             if (e.Row.FindControl("CheckBox_All") != null)  
04             ...{  
05                 CheckBox chk = e.Row.FindControl("CheckBox_All") as CheckBox;  
06                 chk.Attributes.Add("onclick", "Check(this,'" + this.GridView1.ClientID + "','CheckBox_Item')");  
07             }  
08 }  
09
10 if (e.Row.RowIndex > -1)  
11 ...{  
12             if ((e.Row.FindControl("HiddenField_Item") != null))  
13             ...{  
14                 HiddenField hf = e.Row.FindControl("HiddenField_Item") as HiddenField;  
15                 hf.Value = DataBinder.Eval(e.Row.DataItem, "Name").ToString();  
16             }  
17 }
18

(6)最後就是如何在按下Button後，可以得到所selected的資料，我們可以在Button事件來處理

01 this.TextBox1.Text = "";  
02 for (int i = 0; i < this.GridView1.Rows.Count; i++)  
03 ...{  
04             CheckBox chk = this.GridView1.Rows[i].FindControl("CheckBox_Item") as CheckBox;  
05             HiddenField hf = this.GridView1.Rows[i].FindControl("HiddenField_Item") as HiddenField;  
06              if (chk.Checked)  
07              ...{  
08                  this.TextBox1.Text += hf.Value+" ; ";  
09              }  
10
11 }
12

這樣就大功告成囉，以上只是個簡單範例，主要的重點是在javascript囉GridView_Select.zip