ASP.NET 魔法學院

如何在GridView做到指定欄位的CheckBox的「全選/取消全選」的功能，筆者有在網路上搜尋到一篇不錯的文章如下，文章中有詳細介紹如何實作此功能

 

GridView CheckBox Selection With a Twist

http://www.codeproject.com/cs/miscctrl/GridViewCheckBox.asp

 

不過它的範例在GridView具有二個以上的「全選/取消全選」欄位時會發生問題，勾選了其中一個欄位時，會造成GridView中所有的欄位都被勾選，如下圖所示。

 

針對以上的問題，以它的程式碼做部分修正。
首先在頁面上放置一個GridView控制項，要做「全選/取消全選」功能的欄位要以TemplateField來實作。
在TemplateField的HeaderTemplate中加入一個CheckBox做為「全選/取消全選」的操作，CheckBox的onclick執行JavaScript Check()函式。

<HeaderTemplate> <input type="checkbox" id="chkAll" name="chkAll" onclick="Check(this,'chkSelect1')" />CategoryName </HeaderTemplate>

在ItemTemplate加入CheckBox及Label，其中CheckBox的ID設為chkSelect1，即為HeaderTemplate的Check()函式的第二個引數。

<ItemTemplate> <asp:CheckBox ID="chkSelect1" runat="server" /> <asp:Label ID="Label1" runat="server" Text='<%# Bind("CategoryName") %>'></asp:Label> </ItemTemplate>

因為要做二個欄位的「全選/取消全選」，故將TemplateField複製一份，並將第二個TemplateField的ItemTemplate中CheckBox的ID設為chkSelect2，其HeaderTemplate的Check()函式第二個引數即為chkSelect2。

GridView完整的aspx程式碼如下
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID" DataSourceID="SqlDataSource2" EmptyDataText="沒有資料錄可顯示。"> <Columns> <asp:TemplateField HeaderText="CategoryID" SortExpression="CategoryName"> <HeaderTemplate> <input type="checkbox" id="chkAll" name="chkAll" onclick="Check(this,'chkSelect')" />CategoryName </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="chkSelect" runat="server" /> <asp:Label ID="Label1" runat="server" Text='<%# Bind("CategoryName") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="CategoryID" SortExpression="CategoryName"> <HeaderTemplate> <input type="checkbox" id="chkAll" name="chkAll" onclick="Check(this,'chkSelect2')" />CategoryName </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="chkSelect2" runat="server" /> <asp:Label ID="Label1" runat="server" Text='<%# Bind("CategoryName") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" /> </Columns> </asp:GridView>

在頁面加入下列的JavaScript程式碼，其中Check()即為GridView表頭CheckBox的呼叫的函式。

<script type="text/javascript"> function Check(parentChk,ChildId) { var oElements = document.getElementsByTagName("INPUT"); var bIsChecked = parentChk.checked; for(i=0; i<oElements.length;i++) { if( IsCheckBox(oElements[i]) && IsMatch(oElements[i].id, ChildId)) { oElements[i].checked = bIsChecked; } } } function IsMatch(id, ChildId) { var sPattern ='^GridView1.*'+ChildId+'$'; var oRegExp = new RegExp(sPattern); if(oRegExp.exec(id)) return true; else return false; } function IsCheckBox(chk) { if(chk.type == 'checkbox') return true; else return false; } </script>

其中Check()函式中，主要是去尋找所有Tag為Input的Element，再去過濾它的id名稱。

因為GridView中的子控制項命名有一定的規則，檢視HTML程式碼可以發現GridView同一個欄位CheckBox命名為以GridView的ID開頭，而以CheckBox的ID為結尾；所以IsMatch()函式中，就是利用這個規則去判斷是否為同欄位的CheckBox。

執行的結果如下

ASP.NET 魔法學院