轉帖|其它|編輯:郝浩|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@fc6vip.cn
文章轉載自:博客轉載