Hiddenfield,checkbox用法

  1 using System;
  2 using System.Data;
  3 using System.Configuration;
  4 using System.Collections;
  5 using System.Web;
  6 using System.Web.Security;
  7 using System.Web.UI;
  8 using System.Web.UI.WebControls;
  9 using System.Web.UI.WebControls.WebParts;
 10 using System.Web.UI.HtmlControls;
 11 
 12 namespace sitemapdemo
 13 {
 14     /// <summary>
 15     /// 涂聚文 Geovin Du
 16     /// 缔友计算机信息技术有限公司
 17     /// </summary>
 18     public partial class CheckBoxes : System.Web.UI.Page
 19     {
 20         /// <summary>
 21         /// 
 22         /// </summary>
 23         /// <param name="sender"></param>
 24         /// <param name="e"></param>
 25         protected void Page_Load(object sender, EventArgs e)
 26         {
 27             if (!Page.IsPostBack)
 28                 BindGridView();
 29         }
 30         /// <summary>
 31         /// 
 32         /// </summary>
 33         private void BindGridView()
 34         {
 35             gvCheckboxes.DataSource = GetDataSource();
 36             gvCheckboxes.DataBind();
 37         }
 38         /// <summary>
 39         /// 
 40         /// </summary>
 41         /// <param name="sender"></param>
 42         /// <param name="e"></param>
 43         protected void gvCheckboxes_PageIndexChanging(object sender, GridViewPageEventArgs e)
 44         {
 45             gvCheckboxes.PageIndex = e.NewPageIndex;
 46             BindGridView();
 47         }
 48         /// <summary>
 49         /// 
 50         /// </summary>
 51         /// <param name="sender"></param>
 52         /// <param name="e"></param>
 53         protected void gvCheckboxes_RowDataBound(object sender, GridViewRowEventArgs e)
 54         {
 55             if (e.Row.RowType == DataControlRowType.DataRow && (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate))
 56             {
 57                 CheckBox chkBxSelect = (CheckBox)e.Row.Cells[0].FindControl("chkBxSelect");
 58                 //服务器端
 59                 //CheckBox chkBxSelect = (CheckBox)e.Row.Cells[0].FindControl("chkBxSelect");
 60                 HtmlInputCheckBox chkBxHeader = (HtmlInputCheckBox)this.gvCheckboxes.HeaderRow.FindControl("chkBxHeader");
 61                 HiddenField hdnFldId = (HiddenField)e.Row.Cells[0].FindControl("hdnFldId");
 62                 //onclick   <asp:CheckBox ID="chkBxHeader"  onclick="javascript:HeaderClick(this);" runat="server" />
 63                 chkBxSelect.Attributes["onclick"] = string.Format("javascript:ChildClick(this,document.getElementById('{0}'),'{1}');", chkBxHeader.ClientID, hdnFldId.Value.Trim());
 64             }
 65         }
 66         /// <summary>
 67         /// 
 68         /// </summary>
 69         /// <returns></returns>
 70         private DataTable GetDataSource()
 71         {
 72             DataTable dTable = new DataTable();
 73 
 74             DataRow dRow = null;
 75             DateTime dTime;
 76             Random rnd = new Random();
 77 
 78             dTable.Columns.Add("Id", System.Type.GetType("System.Int32"));
 79             dTable.Columns[0].AutoIncrement = true;
 80             dTable.Columns.Add("RandomNo");
 81             dTable.Columns.Add("Date");
 82             dTable.Columns.Add("Time");
 83 
 84             for (int n = 0; n < 25; ++n)
 85             {
 86                 dRow = dTable.NewRow();
 87                 dTime = DateTime.Now;
 88 
 89                 dRow["RandomNo"] = rnd.NextDouble();
 90                 dRow["Date"] = dTime.ToString("MM/dd/yyyy");
 91                 dRow["Time"] = dTime.ToString("hh:mm:ss tt");
 92 
 93                 dTable.Rows.Add(dRow);
 94                 dTable.AcceptChanges();
 95             }
 96 
 97             return dTable;
 98         }
 99         /// <summary>
100         /// 
101         /// </summary>
102         /// <param name="sender"></param>
103         /// <param name="e"></param>
104         protected void btnDelete_Click(object sender, EventArgs e)
105         {
106             //Get Ids
107             string[] IDs = hdnFldSelectedValues.Value.Trim().Split('|');
108             int k = 0;
109             string ds = string.Empty;
110             //Code for deleting items
111             foreach (string Item in IDs)
112             {
113                 //Call appropiate method for deletion operation.
114                 if (k == 0)
115                 {
116                     ds = Item;
117                 }
118                 if (k != 0)
119                 {
120                     ds += "," + Item;
121                 }
122                 k++;
123             }
124             Response.Write(ds);
125         }
126     }
127 }

  1      <script type="text/javascript">
　　
  2         //Reference of the GridView. Geovin Du
  3         var TargetBaseControl = null;
  4         //Total no of checkboxes in a particular column inside the GridView.
  5         var CheckBoxes;
  6         //Total no of checked checkboxes in a particular column inside the GridView.
  7         var CheckedCheckBoxes;
  8         //Array of selected item's Ids.
  9         var SelectedItems;
 10         //Hidden field that wil contain string of selected item's Ids separated by '|'.
 11         var SelectedValues;
 12         
 13         window.onload = function()
 14         {
 15             //Get reference of the GridView. 
 16             try
 17             {
 18                 TargetBaseControl = document.getElementById('<%= this.gvCheckboxes.ClientID %>');
 19             }
 20             catch(err)
 21             {
 22                 TargetBaseControl = null;
 23             }
 24             
 25             //Get total no of checkboxes in a particular column inside the GridView.
 26             try
 27             {
 28                 CheckBoxes = parseInt('<%= this.gvCheckboxes.Rows.Count %>');
 29             }
 30             catch(err)
 31             {
 32                 CheckBoxes = 0;
 33             }
 34             
 35             //Get total no of checked checkboxes in a particular column inside the GridView.
 36             CheckedCheckBoxes = 0;
 37             
 38             //Get hidden field that wil contain string of selected item's Ids separated by '|'.
 39             SelectedValues = document.getElementById('<%= this.hdnFldSelectedValues.ClientID %>');
 40             
 41             //Get an array of selected item's Ids.
 42             if(SelectedValues.value == '')
 43                 SelectedItems = new Array();
 44             else
 45                 SelectedItems = SelectedValues.value.split('|');
 46                 
 47             //Restore selected CheckBoxes' states.
 48             if(TargetBaseControl != null)
 49                 RestoreState();
 50         }
 51         
 52         function HeaderClick(CheckBox)
 53         {            
 54             //Get all the control of the type INPUT in the base control.
 55             var Inputs = TargetBaseControl.getElementsByTagName('input');
 56             
 57             //Checked/Unchecked all the checkBoxes in side the GridView & modify selected items array.
 58             for(var n = 0; n < Inputs.length; ++n)
 59                 if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf('chkBxSelect',0) >= 0)
 60                 {
 61                     Inputs[n].checked = CheckBox.checked;
 62                     if(CheckBox.checked)
 63                         SelectedItems.push(document.getElementById(Inputs[n].id.replace('chkBxSelect','hdnFldId')).value);
 64                     else
 65                         DeleteItem(document.getElementById(Inputs[n].id.replace('chkBxSelect','hdnFldId')).value);
 66                 }
 67                         
 68             //Update Selected Values. 
 69             SelectedValues.value = SelectedItems.join('|');
 70                         
 71             //Reset Counter
 72             CheckedCheckBoxes = CheckBox.checked ? CheckBoxes : 0;
 73         }
 74         
 75         function ChildClick(CheckBox, HCheckBox, Id)
 76         {               
 77             //Modifiy Counter;            
 78             if(CheckBox.checked && CheckedCheckBoxes < CheckBoxes)
 79                 CheckedCheckBoxes++;
 80             else if(CheckedCheckBoxes > 0) 
 81                 CheckedCheckBoxes--;
 82                 
 83             //Change state of the header CheckBox.
 84             if(CheckedCheckBoxes < CheckBoxes)
 85                 HCheckBox.checked = false;
 86             else if(CheckedCheckBoxes == CheckBoxes)
 87                 HCheckBox.checked = true;
 88                 
 89             //Modify selected items array.
 90             if(CheckBox.checked)
 91                 SelectedItems.push(Id);
 92             else
 93                 DeleteItem(Id);
 94                 
 95             //Update Selected Values. 
 96             SelectedValues.value = SelectedItems.join('|');
 97         }   
 98         
 99         function RestoreState()
100         {
101             //Get all the control of the type INPUT in the base control.
102             var Inputs = TargetBaseControl.getElementsByTagName('input');
103             
104             //Header CheckBox
105             var HCheckBox = null;
106             
107             //Restore previous state of the all checkBoxes in side the GridView.
108             for(var n = 0; n < Inputs.length; ++n)
109                 if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf('chkBxSelect',0) >= 0)
110                     if(IsItemExists(document.getElementById(Inputs[n].id.replace('chkBxSelect','hdnFldId')).value) > -1)
111                     {
112                         Inputs[n].checked = true;          
113                         CheckedCheckBoxes++;      
114                     }
115                     else
116                         Inputs[n].checked = false;   
117                 else if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf('chkBxHeader',0) >= 0)    
118                     HCheckBox = Inputs[n];  
119                     
120             //Change state of the header CheckBox.
121             if(CheckedCheckBoxes < CheckBoxes)
122                 HCheckBox.checked = false;
123             else if(CheckedCheckBoxes == CheckBoxes)
124                 HCheckBox.checked = true;  
125         }
126         
127         function DeleteItem(Text)
128         {
129             var n = IsItemExists(Text);
130             if( n > -1)
131                 SelectedItems.splice(n,1);
132         }
133         
134         function IsItemExists(Text)
135         {
136             for(var n = 0; n < SelectedItems.length; ++n)
137                 if(SelectedItems[n] == Text)
138                     return n;
139                     
140             return -1;  
141         }     
142     </script>
143 </head>
144 <body>
145     <form id="form1" runat="server">
146     <div>
147            <asp:GridView ID="gvCheckboxes" runat="server" AutoGenerateColumns="False" OnPageIndexChanging="gvCheckboxes_PageIndexChanging"
148             OnRowDataBound="gvCheckboxes_RowDataBound" AllowPaging="True">
149             <Columns>
150                 <asp:TemplateField HeaderText="Select">
151                     <ItemTemplate>
152                         <asp:CheckBox ID="chkBxSelect" runat="server" />
153                         <asp:HiddenField ID="hdnFldId" runat="server" Value='<%# Eval("Id") %>' />
154                     </ItemTemplate>
155                     <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
156                     <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
157                     <HeaderTemplate>
158                     <input type="checkbox" id="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
159                        
160                     </HeaderTemplate>
161                 </asp:TemplateField>
162                 <asp:BoundField DataField="RandomNo" HeaderText="Random Number">
163                     <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
164                     <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
165                 </asp:BoundField>
166                 <asp:BoundField DataField="Date" HeaderText="Date">
167                     <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="75px" />
168                     <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="75px" />
169                 </asp:BoundField>
170                 <asp:BoundField DataField="Time" HeaderText="Time">
171                     <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
172                     <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
173                 </asp:BoundField>
174             </Columns>
175             <RowStyle BackColor="Moccasin" />
176             <AlternatingRowStyle BackColor="NavajoWhite" />
177             <HeaderStyle BackColor="DarkOrange" Font-Bold="True" ForeColor="White" />
178         </asp:GridView>
179         <asp:HiddenField ID="hdnFldSelectedValues" runat="server" />
180         <asp:Button ID="btnDelete" runat="server" OnClick="btnDelete_Click" Text="DELETE" />
181         </div>
182