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"  οnclick="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