彩票走势图

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

转帖|其它|编辑:郝浩|2010-11-25 14:27:10.000|阅读 614 次

概述:我们在使用GridView的时候,很多时候需要使用CheckBox列,比如批量删除,批量审批,但是每每都需要记住繁琐的实现方法。多麻烦呀!本文将手把手教你如何扩展GridView之自带CheckBox ,希望对大家有帮助。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

  我们在使用GridView的时候,很多时候需要使用CheckBox列,比如批量删除,批量审批,但是每每都需要记住繁琐的实现方法。多麻烦呀!本文将手把手教你如何扩展GridView之自带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' 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)

{

//...

}

}

来获取是否已经选中此行。

 


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:博客转载

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP