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 }
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
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