我们在使用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(
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)
{
//...
}
}
来获取是否已经选中此行。
上篇文章:手把手教你如何扩展GridView之自动排序篇