zoukankan      html  css  js  c++  java
  • 手把手教你如何扩展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(
    " <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(
    thisthis.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' onclick='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之自动排序篇
     

  • 相关阅读:
    Python 2 中的编码
    奇异值分解及其应用
    c#基础系列3---深入理解ref 和out
    c#基础系列2---深入理解 String
    c#基础系列1---深入理解值类型和引用类型
    广州.NET微软技术俱乐部微信群有用信息集锦(10)
    程序员英语二三事(3)
    BDD实战篇
    BDD实战篇
    广州.NET微软技术俱乐部
  • 原文地址:https://www.cnblogs.com/jillzhang/p/775716.html
Copyright © 2011-2022 走看看