利用JavaScript实现GridView中表头CheckBox的全选功能
来源:互联网 发布:mysql bit类型 编辑:程序博客网 时间:2024/04/27 17:25
关键代码如下:
1.在GridView中Header中添加Checkbox,代码如下
Code Snippet
- <asp:GridView ID="GridView1" runat="server">
- <Columns>
- <asp:TemplateField>
- <HeaderTemplate>
- <asp:CheckBox ID="HeaderLevelCheckBox" runat="server" />
- HeaderTemplate>
- <ItemTemplate>
- <asp:CheckBox ID="RowLevelCheckBox" runat="server" />
- ItemTemplate>
- asp:TemplateField>
- Columns>
- asp:GridView>
2.添加JavaScript文件
Code Snippet
- <script type="text/javascript">
- function ChangeCheckBoxState(id, checkState) {
- var cb = document.getElementById(id);
- if (cb != null)
- cb.checked = checkState;
- }
- function ChangeAllCheckBoxStates(checkState) {
- //更新CheckBoxIDs数组中所有的CheckBox的checkState
- if (CheckBoxIDs != null) {
- for (var i = 0; i < CheckBoxIDs.length; i++)
- ChangeCheckBoxState(CheckBoxIDs[i], checkState);
- }
- }
- function ChangeHeaderAsNeeded() {
- //?动更新Header的CheckBox
- if (CheckBoxIDs != null) {
- // 检查是否所有CheckBox?中
- for (var i = 1; i < CheckBoxIDs.length; i++) {
- var cb = document.getElementById(CheckBoxIDs[i]);
- if (!cb.checked) {
- // 有任何一个CheckBox未?中?则Header的CheckBox不?中
- ChangeCheckBoxState(CheckBoxIDs[0], false);
- return;
- }
- }
- //如果代码??到???则所有CheckBox?中?则Header的CheckBox也?中
- ChangeCheckBoxState(CheckBoxIDs[0], true);
- }
- }
- script>
3.为GridView添加 DataBound事件,实现客户端Header的
onclick
的方法
Code Snippet
- protected void GridView1_DataBound(object sender, EventArgs e)
- {
- //每次数据绑定到GridView????建立CheckBoxIDs数组
- //?得header CheckBox
- CheckBox cbHeader = GridView1.HeaderRow.FindControl("HeaderLevelCheckBox") as CheckBox;
- //当点击header CheckBox 全?/取消 时???客户端ChangeCheckBoxState函数
- cbHeader.Attributes.Add("onclick", "ChangeAllCheckBoxStates(this.checked);");
- //添加Header CheckBox's ID 到客户端 CheckBoxIDs 数组
- List<string> ArrayValues = new List<string>();
- ArrayValues.Add(string.Concat("'", cbHeader.ClientID, "'"));
- foreach (GridViewRow gvr in GridView1.Rows)
- {
- //?取ItemTemplate中CheckBox
- CheckBox cb = gvr.FindControl("RowLevelCheckBox") as CheckBox;
- //如果Item CheckBox有一?为?中?则Header CheckBox未?中
- cb.Attributes.Add("onclick", "ChangeHeaderAsNeeded();");
- //添加Item CheckBox's ID 到客户端 CheckBoxIDs 数组
- ArrayValues.Add(string.Concat("'", cb.ClientID, "'"));
- }
- //?出ArrayValues数组到Literal 控件 ()
- CheckBoxIDsArray.Text = "";
- }
4.生成测试数据
Code Snippet
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!IsPostBack)
- {
- DirectoryInfo dirInfo = new DirectoryInfo(Request.PhysicalApplicationPath);
- GridView1.DataSource = dirInfo.GetFiles();
- GridView1.DataBind();
- }
- }
注:翻译自《Checking All CheckBoxes in a GridView Using Client-Side Script and a Check All CheckBox》原文代码下载Download the code used in this article
参考:1.Checking All CheckBoxes in a GridView
2.Working with Client-Side Script 获取更多关于 client-side HTML attributes and events using server-side ASP.NET code.
- 利用JavaScript实现GridView中表头CheckBox的全选功能
- CheckBox全选功能的实现--JavaScript
- 实现GridView里的checkbox 全选功能:(后台实现)
- checkbox全选功能javascript实现
- GridView中实现类邮件的CheckBox全选功能
- GridView中实现类邮件的CheckBox全选功能
- 全选/取消 gridview中checkbox的功能实现
- [extjs]GridPanel中表头checkbox全选框的bug
- GridView 添加checkBox 实现全选功能
- GridView内嵌checkbox的全选功能
- DataList中的CheckBox利用 javaScript实现全选
- C# GridView列头添加CheckBox控件实现全选功
- GridView中如何实现CheckBox的全选?
- GridView中实现CheckBox的全选
- GridView中实现CheckBox的全选
- GridView中实现CheckBox的全选
- GridView中实现CheckBox的全选
- GridView中实现CheckBox的全选
- 用IVideoWindow显示视频刷新的问题(不能显示)
- FactoryMethod 工厂方法模式
- Linux - 3. 文件系统
- WinCE驱动开发问题精华集锦
- 科技巨头看好IPTV 中国市场潜力巨大
- 利用JavaScript实现GridView中表头CheckBox的全选功能
- Windows Socket 网络编程(二) —— 套接字编程原理
- 未处理异常和C++异常——Windows核心编程学习手札之二十五
- 解析ifstream 与ofstream的用法
- 字符串翻转
- uclinux系统移植到bf561板子上过程
- struts2异常处理
- XMPP简介
- (转)C语言中auto,register,static,const,volatile的区别