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

时间:2021-10-29 08:57:46

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

手把手教你如何扩展GridView之自带CheckBox    // 是否显示全选
手把手教你如何扩展GridView之自带CheckBox
        [
手把手教你如何扩展GridView之自带CheckBox      Description(
" 显示全选列 " ),
手把手教你如何扩展GridView之自带CheckBox      Category(
" 扩展 " ),
手把手教你如何扩展GridView之自带CheckBox        DefaultValue(
false )
手把手教你如何扩展GridView之自带CheckBox      ]
手把手教你如何扩展GridView之自带CheckBox        
public   virtual   bool  ShowCheckAll
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox        
{
手把手教你如何扩展GridView之自带CheckBox            
get
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox            
{
手把手教你如何扩展GridView之自带CheckBox                
object obj2 = this.ViewState["ShowCheckAll"];
手把手教你如何扩展GridView之自带CheckBox                
if (obj2 != null)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                
{
手把手教你如何扩展GridView之自带CheckBox                    
return (bool)obj2;
手把手教你如何扩展GridView之自带CheckBox                }

手把手教你如何扩展GridView之自带CheckBox                
return false;
手把手教你如何扩展GridView之自带CheckBox
手把手教你如何扩展GridView之自带CheckBox            }

手把手教你如何扩展GridView之自带CheckBox            
set
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox            
{
手把手教你如何扩展GridView之自带CheckBox                
bool aShowCheckAll = this.ShowCheckAll;
手把手教你如何扩展GridView之自带CheckBox                
if (value != aShowCheckAll)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                
{
手把手教你如何扩展GridView之自带CheckBox                    
this.ViewState["ShowCheckAll"= value;
手把手教你如何扩展GridView之自带CheckBox                    
if (base.Initialized)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                    
{
手把手教你如何扩展GridView之自带CheckBox                        
base.RequiresDataBinding = true;
手把手教你如何扩展GridView之自带CheckBox                    }

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

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

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

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

手把手教你如何扩展GridView之自带CheckBox  public   enum  CheckColumnAlign
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox    
{
手把手教你如何扩展GridView之自带CheckBox        Left, Right
手把手教你如何扩展GridView之自带CheckBox    }

手把手教你如何扩展GridView之自带CheckBox
手把手教你如何扩展GridView之自带CheckBox   
// 是否显示全选
手把手教你如何扩展GridView之自带CheckBox
        [
手把手教你如何扩展GridView之自带CheckBox      Description(
" 全选列的位置 " ),
手把手教你如何扩展GridView之自带CheckBox      Category(
" 扩展 " ),
手把手教你如何扩展GridView之自带CheckBox      DefaultValue(CheckColumnAlign.Left)
手把手教你如何扩展GridView之自带CheckBox      ]
手把手教你如何扩展GridView之自带CheckBox        
public   virtual  CheckColumnAlign CheckColumnAlign
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox        
{
手把手教你如何扩展GridView之自带CheckBox            
get
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox            
{
手把手教你如何扩展GridView之自带CheckBox                
object obj2 = this.ViewState["CheckColumnAlign"];
手把手教你如何扩展GridView之自带CheckBox                
if (obj2 != null)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                
{
手把手教你如何扩展GridView之自带CheckBox                    
return (CheckColumnAlign)obj2;
手把手教你如何扩展GridView之自带CheckBox                }

手把手教你如何扩展GridView之自带CheckBox                
return CheckColumnAlign.Left;
手把手教你如何扩展GridView之自带CheckBox            }

手把手教你如何扩展GridView之自带CheckBox            
set
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox            
{
手把手教你如何扩展GridView之自带CheckBox                CheckColumnAlign aCheckColumnAlign 
= this.CheckColumnAlign;
手把手教你如何扩展GridView之自带CheckBox                
if (value != aCheckColumnAlign)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                
{
手把手教你如何扩展GridView之自带CheckBox                    
this.ViewState["CheckColumnAlign"= value;
手把手教你如何扩展GridView之自带CheckBox                    
if (base.Initialized)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                    
{
手把手教你如何扩展GridView之自带CheckBox                        
base.RequiresDataBinding = true;
手把手教你如何扩展GridView之自带CheckBox                    }

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

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

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

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

手把手教你如何扩展GridView之自带CheckBox StringBuilder sb  =   new  StringBuilder();
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
"  <script type=\ " text / javascript\ " > " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
" function CheckAll(oCheckbox) " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
" { " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
" var GridView2 = document.getElementById(\ ""  + this.ClientID +  " \ " ); " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
"  for(i = 1;i < GridView2.rows.length; i++) " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
" { " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
" var inputArray = GridView2.rows[i].getElementsByTagName(\ " INPUT\ " ); " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
" for(var j=0;j<inputArray.length;j++) " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
" { if(inputArray[j].type=='checkbox') " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
" {if(inputArray[j].id.indexOf('ItemCheckBox',0)>-1){inputArray[j].checked =oCheckbox.checked; }}  } " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
" } " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
"  } " );
手把手教你如何扩展GridView之自带CheckBox            sb.Append(
" </script> " );
手把手教你如何扩展GridView之自带CheckBox            ScriptManager.RegisterClientScriptBlock(
this this .GetType(),  " CheckFun " , sb.ToString(),  false );

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

手把手教你如何扩展GridView之自带CheckBox    if  (ShowCheckAll)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                
{
手把手教你如何扩展GridView之自带CheckBox                    GridViewRow row 
= e.Row;
手把手教你如何扩展GridView之自带CheckBox                    
if (row.RowType == DataControlRowType.Header)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                    
{
手把手教你如何扩展GridView之自带CheckBox                        TableCell cell 
= new TableCell();
手把手教你如何扩展GridView之自带CheckBox                        cell.Wrap 
= Wrap;
手把手教你如何扩展GridView之自带CheckBox                        cell.Width 
= Unit.Pixel(50);
手把手教你如何扩展GridView之自带CheckBox                        cell.Text 
= " <input id='Checkbox2' type='checkbox' onclick='CheckAll(this)'/><label>全选</label>";
手把手教你如何扩展GridView之自带CheckBox                        
if (CheckColumnAlign == CheckColumnAlign.Left)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                        
{
手把手教你如何扩展GridView之自带CheckBox                            row.Cells.AddAt(
0, cell);
手把手教你如何扩展GridView之自带CheckBox                        }

手把手教你如何扩展GridView之自带CheckBox                        
else
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                        
{
手把手教你如何扩展GridView之自带CheckBox                            
int index = row.Cells.Count;
手把手教你如何扩展GridView之自带CheckBox                            row.Cells.AddAt(index, cell);
手把手教你如何扩展GridView之自带CheckBox                        }

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

手把手教你如何扩展GridView之自带CheckBox                    
else if (row.RowType == DataControlRowType.DataRow)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                    
{
手把手教你如何扩展GridView之自带CheckBox                        TableCell cell 
= new TableCell();
手把手教你如何扩展GridView之自带CheckBox                        cell.Wrap 
= Wrap;
手把手教你如何扩展GridView之自带CheckBox                        CheckBox cb 
= new CheckBox();
手把手教你如何扩展GridView之自带CheckBox                        cell.Width 
= Unit.Pixel(50);
手把手教你如何扩展GridView之自带CheckBox                        cb.ID 
= "ItemCheckBox";
手把手教你如何扩展GridView之自带CheckBox                        cell.Controls.Add(cb);
手把手教你如何扩展GridView之自带CheckBox                        
if (CheckColumnAlign == CheckColumnAlign.Left)
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                        
{
手把手教你如何扩展GridView之自带CheckBox                            row.Cells.AddAt(
0, cell);
手把手教你如何扩展GridView之自带CheckBox                        }

手把手教你如何扩展GridView之自带CheckBox                        
else
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox                        
{
手把手教你如何扩展GridView之自带CheckBox                            
int index = row.Cells.Count;
手把手教你如何扩展GridView之自带CheckBox                            row.Cells.AddAt(index, cell);
手把手教你如何扩展GridView之自带CheckBox                        }

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

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

用于记录CheckBox的ID的属性

手把手教你如何扩展GridView之自带CheckBox  public   string  CheckBoxID
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox        
{
手把手教你如何扩展GridView之自带CheckBox            
get
手把手教你如何扩展GridView之自带CheckBox手把手教你如何扩展GridView之自带CheckBox            
{
手把手教你如何扩展GridView之自带CheckBox                
return "ItemCheckBox";
手把手教你如何扩展GridView之自带CheckBox            }

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

使用的时候,只需要设置扩展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之自动排序篇