[ASP.NET] SelectAll in GridView

  • 3620
  • 0
  • 2011-11-11

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

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

也就是靠使用者自己行撰寫code

在一些討論區常看到一些發問者,提問有關在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

 

(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

 

若本文對您有所幫助,歡迎轉貼,但請在加註【轉貼】及來源出處,並在附上本篇的超連結,感恩您的配合囉。

By No.18