手把手教你如何扩展GridView之自带CheckBox

2024-05-07 08:08:48

我们在使用GridView的时候，很多时候需要使用CheckBox列，比如批量删除，批量审批，但是每每都需要记住繁琐的实现方法。多麻烦呀！再次给GridView做个手术，让它自己就能产生CheckBox岂不爽死了。以后您就有权利忘记怎么实现CheckBox列了。哈哈，作咱们这行的，就要学的慢慢退化，什么事情都记着，累也累死了。
      下面谈谈我这实现的思路:
      因为GridView是基于模板的，Columns也不能在后台添加，所以排除通过添加Column来实现，而采用在GridView创建行的时候动态创建表单元格，在表头行上添加一个全选CheckBox，数据行上添加选择框，点击全选，通过向页面注册的脚本来实现全选。
   下面就看看关键的代码：
    为了增加灵活性，添加了一个属性，控制是否显示CheckBox列

//是否显示全选

[

Description("显示全选列"),

Category("扩展"),

DefaultValue(false)

]

public virtual bool ShowCheckAll

{

get

{

object obj2 = this.ViewState["ShowCheckAll"];

if (obj2 != null)

{

return (bool)obj2;

}

return false;

}

set

{

bool aShowCheckAll = this.ShowCheckAll;

if (value != aShowCheckAll)

{

this.ViewState["ShowCheckAll"] = value;

if (base.Initialized)

{

base.RequiresDataBinding = true;

}

}

}

}

用于控制选择列是添加到表的左端还是右端的属性

public enum CheckColumnAlign

{

Left, Right

}

//是否显示全选

[

Description("全选列的位置"),

Category("扩展"),

DefaultValue(CheckColumnAlign.Left)

]

public virtual CheckColumnAlign CheckColumnAlign

{

get

{

object obj2 = this.ViewState["CheckColumnAlign"];

if (obj2 != null)

{

return (CheckColumnAlign)obj2;

}

return CheckColumnAlign.Left;

}

set

{

CheckColumnAlign aCheckColumnAlign = this.CheckColumnAlign;

if (value != aCheckColumnAlign)

{

this.ViewState["CheckColumnAlign"] = value;

if (base.Initialized)

{

base.RequiresDataBinding = true;

}

}

}

}

在页面加载的时候，注册全选脚本

StringBuilder sb = new StringBuilder();

sb.Append(" <script type=\"text/javascript\">");

sb.Append("function CheckAll(oCheckbox)");

sb.Append("{");

sb.Append("var GridView2 = document.getElementById(\"" + this.ClientID + "\");");

sb.Append(" for(i = 1;i < GridView2.rows.length; i++)");

sb.Append("{");

sb.Append("var inputArray = GridView2.rows[i].getElementsByTagName(\"INPUT\");");

sb.Append("for(var j=0;j<inputArray.length;j++)");

sb.Append("{ if(inputArray[j].type=='checkbox')");

sb.Append("{if(inputArray[j].id.indexOf('ItemCheckBox',0)>-1){inputArray[j].checked =oCheckbox.checked; }} }");

sb.Append("}");

sb.Append(" }");

sb.Append("</script>");

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "CheckFun", sb.ToString(), false);

在GridView的RowCreate事件中，添加如下代码，用于创建CheckBox列

if (ShowCheckAll)

{

GridViewRow row = e.Row;

if (row.RowType == DataControlRowType.Header)

{

TableCell cell = new TableCell();

cell.Wrap = Wrap;

cell.Width = Unit.Pixel(50);

cell.Text = " <input id='Checkbox2' type='checkbox' οnclick='CheckAll(this)'/><label>全选</label>";

if (CheckColumnAlign == CheckColumnAlign.Left)

{

row.Cells.AddAt(0, cell);

}

else

{

int index = row.Cells.Count;

row.Cells.AddAt(index, cell);

}

}

else if (row.RowType == DataControlRowType.DataRow)

{

TableCell cell = new TableCell();

cell.Wrap = Wrap;

CheckBox cb = new CheckBox();

cell.Width = Unit.Pixel(50);

cb.ID = "ItemCheckBox";

cell.Controls.Add(cb);

if (CheckColumnAlign == CheckColumnAlign.Left)

{

row.Cells.AddAt(0, cell);

}

else

{

int index = row.Cells.Count;

row.Cells.AddAt(index, cell);

}

}

}

用于记录CheckBox的ID的属性

public string CheckBoxID

{

get

{

return "ItemCheckBox";

}

}

使用的时候，只需要设置扩展GridView的ShowCheckAll=True,设置CheckColumnAlign为Left,CheckBox列在最左边，Right在最右面，注意因为没有添加Columns，所以Columns并没有因为因为添加了CheckBox列而变化，在Column的索引中，CheckBox列不在计算范围。
在扩展的GridView的OnRowDataBound事件中，就可以通过
CheckBox cb = e.Row.FindControl(gridView.CheckBoxID) as CheckBox;
if(cb!=null)
{
    if(cb.Checked)
   {
        //...
   }
}
来获取是否已经选中此行。
上篇文章:手把手教你如何扩展GridView之自动排序篇

转载于:https://www.cnblogs.com/jillzhang/archive/2007/06/07/775716.html

手把手教你如何扩展GridView之自带CheckBox相关推荐

手把手教你如何扩展GridView之个性分页
最新重构源码下载:打造0代码全自动GridView-天具神力整天面对GridView的分页,早就厌烦了,下面就谈下如何给GridView扩展出个性的分页来,首先看看运行效果图: ...
程超：手把手教你动手扩展分布式调用链
一.说在前面微服务是当下最火的词语,现在很多公司都在推广微服务,当服务越来越多的时候,我们是否会纠结以下几个问题: 面对一笔超时的订单,究竟是哪一步处理时间超长呢? 数据由于并发莫名篡改,到底都谁有 ...
[摄影基本学习]-01-认识相机(从零开始手把手教你学摄影)
内容主要参照b站<从零开始手把手教你学摄影,20节课带你从小白到大师 | 摄影前期拍摄入门 >,宝藏up主推荐: 熊熊Bearie 链接: https://www.bilibili.com ...
[摄影基本学习]-02-器材了解(从零开始手把手教你学摄影)
内容主要参照b站<从零开始手把手教你学摄影,20节课带你从小白到大师 | 摄影前期拍摄入门 >,宝藏up主推荐:熊熊Bearie 链接:https://www.bilibili.com/v ...
手把手教你在windows虚拟机安装带网络的Linux系统
手把手教你在windows上虚拟机安装带网络Linux系统目录 1.Linux的几个发行版本 2. 虚拟机 2.1 虚拟机是什么 2.2 弹性计算 2.3VMware12 2.3.1 安装VMwar ...
[摄影基本学习]-03-基础了解(从零开始手把手教你学摄影)
内容主要参照b站<从零开始手把手教你学摄影,20节课带你从小白到大师 | 摄影前期拍摄入门 >,宝藏up主推荐: 熊熊Bearie 链接: https://www.bilibili.com ...
手把手教你扩展个人微信号（1）
手把手教你扩展个人微信号(1) 现在的日常生活已经离不开微信,难免会生出微信有没有什么API可以使用的想法. 那样就可以拿自己微信做个消息聚合.开个投票什么的,可以显然没有这种东西. 不过还好,有网页 ...
手把手教你做一个自己的chrome扩展程序
手把手教你做一个自己的chrome扩展程序 [目录] first.效果 1.收藏夹修改 (1).鼠标移动到收藏夹上的动作效果 (2).收藏夹框 (3)百度搜索框功能 2.右上文字修改 3.背景图片修改 ...
手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单参考地址为:手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

最新文章

热门文章