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

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

      我们在使用GridView的时候,很多时候需要使用CheckBox列,比如批量删除,批量审批,但是每每都需要记住繁琐的实现方法。多麻烦呀!再次给GridView做个手术,让它自己就能产生CheckBox岂不爽死了。以后您就有权利忘记怎么实现CheckBox列了。哈哈,作咱们这行的,就要学的慢慢退化,什么事情都记着,累也累死了。

      下面谈谈我这实现的思路:

      因为GridView是基于模板的,Columns也不能在后台添加,所以排除通过添加Column来实现,而采用在GridView创建行的时候动态创建表单元格,在表头行上添加一个全选CheckBox,数据行上添加选择框,点击全选,通过向页面注册的脚本来实现全选。

   下面就看看关键的代码:

    为了增加灵活性,添加了一个属性,控制是否显示CheckBox列  

None.gif   //是否显示全选

None.gif
        [

None.gif      Description(
"显示全选列"),

None.gif      Category(
"扩展"),

None.gif        DefaultValue(
false)

None.gif      ]

None.gif        
public virtual bool ShowCheckAll

ExpandedBlockStart.gifContractedBlock.gif        
dot.gif{

InBlock.gif            
get

ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{

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

InBlock.gif                
if (obj2 != null)

ExpandedSubBlockStart.gifContractedSubBlock.gif                
dot.gif{

InBlock.gif                    
return (bool)obj2;

ExpandedSubBlockEnd.gif                }


InBlock.gif                
return false;

InBlock.gif

ExpandedSubBlockEnd.gif            }


InBlock.gif            
set

ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{

InBlock.gif                
bool aShowCheckAll = this.ShowCheckAll;

InBlock.gif                
if (value != aShowCheckAll)

ExpandedSubBlockStart.gifContractedSubBlock.gif                
dot.gif{

InBlock.gif                    
this.ViewState["ShowCheckAll"= value;

InBlock.gif                    
if (base.Initialized)

ExpandedSubBlockStart.gifContractedSubBlock.gif                    
dot.gif{

InBlock.gif                        
base.RequiresDataBinding = true;

ExpandedSubBlockEnd.gif                    }


ExpandedSubBlockEnd.gif                }


ExpandedSubBlockEnd.gif            }


ExpandedBlockEnd.gif        }

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

None.gif public enum CheckColumnAlign

ExpandedBlockStart.gifContractedBlock.gif    
dot.gif{

InBlock.gif        Left, Right

ExpandedBlockEnd.gif    }


None.gif

None.gif   
//是否显示全选

None.gif
        [

None.gif      Description(
"全选列的位置"),

None.gif      Category(
"扩展"),

None.gif      DefaultValue(CheckColumnAlign.Left)

None.gif      ]

None.gif        
public virtual CheckColumnAlign CheckColumnAlign

ExpandedBlockStart.gifContractedBlock.gif        
dot.gif{

InBlock.gif            
get

ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{

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

InBlock.gif                
if (obj2 != null)

ExpandedSubBlockStart.gifContractedSubBlock.gif                
dot.gif{

InBlock.gif                    
return (CheckColumnAlign)obj2;

ExpandedSubBlockEnd.gif                }


InBlock.gif                
return CheckColumnAlign.Left;

ExpandedSubBlockEnd.gif            }


InBlock.gif            
set

ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{

InBlock.gif                CheckColumnAlign aCheckColumnAlign 
= this.CheckColumnAlign;

InBlock.gif                
if (value != aCheckColumnAlign)

ExpandedSubBlockStart.gifContractedSubBlock.gif                
dot.gif{

InBlock.gif                    
this.ViewState["CheckColumnAlign"= value;

InBlock.gif                    
if (base.Initialized)

ExpandedSubBlockStart.gifContractedSubBlock.gif                    
dot.gif{

InBlock.gif                        
base.RequiresDataBinding = true;

ExpandedSubBlockEnd.gif                    }


ExpandedSubBlockEnd.gif                }


ExpandedSubBlockEnd.gif            }


ExpandedBlockEnd.gif        }

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

None.gif StringBuilder sb = new StringBuilder();

None.gif            sb.Append(
" "text/javascript">");

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

None.gif            sb.Append(
"{ ");

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

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

None.gif            sb.Append(
"{ ");

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

None.gif            sb.Append(
"for(var j=0;j");

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

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

None.gif            sb.Append(
"}");

None.gif            sb.Append(
" }");

None.gif            sb.Append(
"");

None.gif            ScriptManager.RegisterClientScriptBlock(
thisthis.GetType(), "CheckFun", sb.ToString(), false);

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

None.gif   if (ShowCheckAll)

ExpandedBlockStart.gifContractedBlock.gif                
dot.gif{

InBlock.gif                    GridViewRow row 
= e.Row;

InBlock.gif                    
if (row.RowType == DataControlRowType.Header)

ExpandedSubBlockStart.gifContractedSubBlock.gif                    
dot.gif{

InBlock.gif                        TableCell cell 
= new TableCell();

InBlock.gif                        cell.Wrap 
= Wrap;

InBlock.gif                        cell.Width 
= Unit.Pixel(50);

InBlock.gif                        cell.Text 
= " ";

InBlock.gif                        
if (CheckColumnAlign == CheckColumnAlign.Left)

ExpandedSubBlockStart.gifContractedSubBlock.gif                        
dot.gif{

InBlock.gif                            row.Cells.AddAt(
0, cell);

ExpandedSubBlockEnd.gif                        }


InBlock.gif                        
else

ExpandedSubBlockStart.gifContractedSubBlock.gif                        
dot.gif{

InBlock.gif                            
int index = row.Cells.Count;

InBlock.gif                            row.Cells.AddAt(index, cell);

ExpandedSubBlockEnd.gif                        }


ExpandedSubBlockEnd.gif                    }


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

ExpandedSubBlockStart.gifContractedSubBlock.gif                    
dot.gif{

InBlock.gif                        TableCell cell 
= new TableCell();

InBlock.gif                        cell.Wrap 
= Wrap;

InBlock.gif                        CheckBox cb 
= new CheckBox();

InBlock.gif                        cell.Width 
= Unit.Pixel(50);

InBlock.gif                        cb.ID 
= "ItemCheckBox";

InBlock.gif                        cell.Controls.Add(cb);

InBlock.gif                        
if (CheckColumnAlign == CheckColumnAlign.Left)

ExpandedSubBlockStart.gifContractedSubBlock.gif                        
dot.gif{

InBlock.gif                            row.Cells.AddAt(
0, cell);

ExpandedSubBlockEnd.gif                        }


InBlock.gif                        
else

ExpandedSubBlockStart.gifContractedSubBlock.gif                        
dot.gif{

InBlock.gif                            
int index = row.Cells.Count;

InBlock.gif                            row.Cells.AddAt(index, cell);

ExpandedSubBlockEnd.gif                        }


ExpandedSubBlockEnd.gif                    }


ExpandedBlockEnd.gif                }

用于记录CheckBox的ID的属性

None.gif public string CheckBoxID

ExpandedBlockStart.gifContractedBlock.gif        
dot.gif{

InBlock.gif            
get

ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{

InBlock.gif                
return "ItemCheckBox";

ExpandedSubBlockEnd.gif            }


ExpandedBlockEnd.gif        }

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

更多相关: