手把手教你如何扩展GridView之自带CheckBox
在页面加载的时候,注册全选脚本
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);
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);
}
}
}
{
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";
}
}
{
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之自动排序篇
[第1页][第2页]