Asp.net源码交流论坛 Asp.net交流讨论区Asp.net技术文章转:手把手教你如何扩展GridView之自带CheckBox

1  /  1  页    1  跳转
发表新主题 回复该主题

标题: 转:手把手教你如何扩展GridView之自带CheckBox

本主题由 董事长 51aspx 于 2008-6-12 8:45:13 执行 移动主题 操作

身份:董事长

 
  • UID:2
  • 来自:北京
  • 精华:27
  • 积分:1696
  • 帖子:1507
  • 注册: 2007-05-17
  • 状态: 离线
  • 威望:54.00
  • 金钱:268.95 元
 
源码发布专家

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

我们在使用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(&quot; <script type=\&quot;text/javascript\&quot;>&quot;);
            sb.Append(&quot;function CheckAll(oCheckbox)&quot;);
            sb.Append(&quot;{&quot;);
            sb.Append(&quot;var GridView2 = document.getElementById(\&quot;&quot; + this.ClientID + &quot;\&quot;);&quot;);
            sb.Append(&quot; for(i = 1;i < GridView2.rows.length; i++)&quot;);
            sb.Append(&quot;{&quot;);
            sb.Append(&quot;var inputArray = GridView2.rows[i].getElementsByTagName(\&quot;INPUT\&quot;);&quot;);
            sb.Append(&quot;for(var j=0;j<inputArray.length;j++)&quot;);
            sb.Append(&quot;{ if(inputArray[j].type=='checkbox')&quot;);
            sb.Append(&quot;{if(inputArray[j].id.indexOf('ItemCheckBox',0)>-1){inputArray[j].checked =oCheckbox.checked; }}  }&quot;);
            sb.Append(&quot;}&quot;);
            sb.Append(&quot; }&quot;);
            sb.Append(&quot;</script>&quot;);
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), &quot;CheckFun&quot;, 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 = &quot; <input id='Checkbox2' type='checkbox' onclick='CheckAll(this)'/><label>全选</label>&quot;;
                        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 = &quot;ItemCheckBox&quot;;
                        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 &quot;ItemCheckBox&quot;;
            }
        }


使用的时候,只需要设置扩展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)
  {
        //...
  }
}


来获取是否已经选中此行。
51aspx 最后编辑于 2007-11-29 19:14:46
 
技术问题请直接发布到论坛,合作及咨询请加技术支持QQ:793095132
问题搜索请点击
引用 回复
 

身份:工程师

 
  • UID:2224
  • 来自:天津
  • 精华:0
  • 积分:148
  • 帖子:143
  • 注册: 2007-12-10
  • 状态: 离线
  • 威望:5.00
  • 金钱:15.05 元

回复:转:手把手教你如何扩展GridView之自带CheckBox

..............
这东西...哭啊...多省心的办法啊...我我我也要学着变懒,!!!
引用 回复
 

身份:学员

 
  • UID:10240
  • 来自:
  • 精华:0
  • 积分:7
  • 帖子:7
  • 注册: 2008-03-18
  • 状态: 离线
  • 威望:0.00
  • 金钱:0.85 元

回复:转:手把手教你如何扩展GridView之自带CheckBox

谢谢啊,有ACCESS的吗?
引用 回复
 

身份:学员

 
  • UID:10145
  • 来自:
  • 精华:0
  • 积分:17
  • 帖子:17
  • 注册: 2008-03-18
  • 状态: 离线
  • 威望:0.00
  • 金钱:1.85 元

回复:转:手把手教你如何扩展GridView之自带CheckBox

不会这个东西,看不懂
引用 回复
 

身份:程序员

 
  • UID:7672
  • 来自:
  • 精华:0
  • 积分:53
  • 帖子:53
  • 注册: 2008-02-24
  • 状态: 离线
  • 威望:0.00
  • 金钱:5.45 元

回复:转:手把手教你如何扩展GridView之自带CheckBox

看不懂。。
引用 回复
 

身份:学员

 
  • UID:26951
  • 来自:
  • 精华:0
  • 积分:11
  • 帖子:12
  • 注册: 2008-08-04
  • 状态: 离线
  • 威望:0.00
  • 金钱:1.35 元

回复:转:手把手教你如何扩展GridView之自带CheckBox

引用 回复
 

身份:学员

 
  • UID:23396
  • 来自:
  • 精华:0
  • 积分:4
  • 帖子:4
  • 注册: 2008-06-26
  • 状态: 离线
  • 威望:0.00
  • 金钱:0.40 元

回复:转:手把手教你如何扩展GridView之自带CheckBox

我也看不懂……
引用 回复
 

身份:学员

 
  • UID:25185
  • 来自:
  • 精华:0
  • 积分:17
  • 帖子:17
  • 注册: 2008-07-16
  • 状态: 离线
  • 威望:0.00
  • 金钱:2.15 元

回复:转:手把手教你如何扩展GridView之自带CheckBox

好的,顶!~
我也是写了很多有用的代码,然后保存起来,需要时再找来复制,粘贴就OK了,真爽!不用牢记每一个代码单词,又不会出错!全都记住太累了,效率也低。
引用 回复
 
1  /  1  页    1  跳转
发表新主题 回复该主题

现在时间是:2009-01-08 05:06:46 京ICP备06046876号