DataGrid實(shí)現(xiàn)自增列、單選、多選 (轉(zhuǎn)載)
只需要在前臺(tái)添加一個(gè)模板列,綁定ItemIndex+1就可以了
<asp:TemplateColumn HeaderText="選擇">
<ItemTemplate>
<%# Container.ItemIndex+1%>
</ItemTemplate>
</asp:TemplateColumn>
(2)實(shí)現(xiàn)單選
在上面的基礎(chǔ)上,為這個(gè)列加一個(gè)radio
<asp:TemplateColumn HeaderText="選擇">
<ItemTemplate>
<%# Container.ItemIndex+1%>
<input type=radio name="rad" value='<%# Container.ItemIndex+1%>'>
</ItemTemplate>
</asp:TemplateColumn>
radio的值也就是自增的1-PageSize
再創(chuàng)建一個(gè)按鈕(名字叫單選),為之添加如下代碼
this.Label1.Text = "選擇的行號(hào):" + Request.Form["rad"].ToString();
這樣簡單的幾步雖然實(shí)現(xiàn)了顯示選擇的行號(hào),但是在按下按鈕以后,radio的選擇是不能被保留的,原因是這個(gè)radio不是runat=server的,我們需要再為這個(gè)頁面放置一個(gè)隱藏域(需runat=server)用來在點(diǎn)擊按鈕的時(shí)候保存選擇的radio,在前臺(tái)添加<input type="hidden" id="rd" runat="server" name="rd">(注意,不要把這個(gè)添加到DataGrid中),然后再在剛才那個(gè)按鈕中添加rd.Value = Request.Form["rad"].ToString();(如果vs.net沒有為這個(gè)HtmlInputHidden申明的話你自己加上protected System.Web.UI.HtmlControls.HtmlInputHidden rd;)。到現(xiàn)在為止還沒有完成,雖然HtmlInputHidden里面已經(jīng)保存了選擇的行號(hào),但是還需要在頁面Load的時(shí)候讓這個(gè)radio為選擇狀態(tài),修改Page_Load()為
private void Page_Load(object sender, System.EventArgs e)
{
string js = "";
js+="<script>\r\n";
js+="function ld(){\r\n";
js+="for(i=0;i<document.getElementsByName('rad').length;i++)\r\n";
js+="if(document.getElementsByName('rad')[i].value==";
js+="document.getElementById('" + this.rd.ClientID + "').value) ";
js+="document.getElementsByName('rad')[i].checked=true\r\n";
js+="}\r\n";
js+="window.onload=ld\r\n";
js+="</script>\r\n";
this.RegisterStartupScript("js",js);
if(!IsPostBack)
{
SetBind();
}
}
下面分析一下以上的這段代碼:
問:為什么不把代碼放在 if(!IsPostBack)中呢?
答:放不放還需要明確 if(!IsPostBack)的意思(具體見http://blog.csdn.net/lovecherry/archive/2005/02/25/301441.aspx中的說明),其實(shí)確切的說應(yīng)該把這段代碼放到 if(!IsPostBack){}else{放到這里}來,因?yàn)榈谝淮渭虞d頁面的時(shí)候,隱藏域里面是不可能有東西的(第一次加載頁面你都選擇并且點(diǎn)擊按鈕提交,怎么會(huì)有東西呢?)
問:\r\n是什么東西?
答:這個(gè)是換行,放不放對(duì)代碼運(yùn)行沒有影響,但是如果放了換行的話,在客戶端的呈現(xiàn)可以更加清晰
問:為什么取rd的值要用document.getElementById('" + this.rd.ClientID + "').value不用document.getElementById('rd').value 呢?
答:其實(shí)在這里你可以后者,但是要知道一點(diǎn),就是rd是服務(wù)端的控件,在某些情況下,id在客戶端的呈現(xiàn)不是在aspx中你指定的id了,而是控件.ClientID,比如在DataGrid中放置的一些服務(wù)器端控件,查看一下源代碼可以看到id是類似DataGrid1__ctl5_Hyperlink1而不是你指定的id了
問:這里為什么不用RegisterClientScriptBlock呢?
答:在這里,這也是無所謂的你可以使用RegisterClientScriptBlock,因?yàn)檫@段js是自運(yùn)行的(js+="window.onload=ld\r\n";這句)的,所以不管在form的開始或是結(jié)束呈現(xiàn)都不會(huì)影響到結(jié)果
(3)實(shí)現(xiàn)多選
首先在前臺(tái)加入如下的代碼(添加一列)
<asp:TemplateColumn>
<ItemTemplate>
<input type="hidden" id="SelectedID" runat="server"
value='<%# Container.ItemIndex%>' NAME="SelectedID"/>
<asp:CheckBox ID="chkExport" Runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
為頁面加入一個(gè)按鈕(名字叫多選),為之添加以下代碼
foreach(DataGridItem di in this.DataGrid1.Items)
{
if(((CheckBox)di.FindControl("chkExport")).Checked==true)
{
this.Label1.Text+=this.DataGrid1.DataKeys[int.Parse(((HtmlInputHidden)di.FindControl("SelectedID")).Value)]+"<br>";
}
}
點(diǎn)擊了這個(gè)按鈕就在label的位置顯示了所有選擇的項(xiàng)目對(duì)應(yīng)的數(shù)據(jù)表主鍵的值,可以利用這個(gè)值進(jìn)行一些數(shù)據(jù)庫的操作
string s="";
foreach(DataGridItem di in this.DataGrid1.Items)
{
if(((CheckBox)di.FindControl("chkExport")).Checked==true)
{
s+=this.DataGrid1.DataKeys[int.Parse(((HtmlInputHidden)di.FindControl("SelectedID")).Value)]+",";
}
}
SqlConnection conn=new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["conn"]);
SqlCommand comm=new SqlCommand("delete from tb1 where ID in (",conn);
comm.CommandText+=s.Substring(0,s.Length-1)+")";//刪除最后一個(gè)逗號(hào)
conn.Open();
comm.ExecuteNonQuery();
conn.Close();
SetBind();
你可以再添加兩個(gè)按鈕,一個(gè)叫選擇所有,一個(gè)叫取消所有選擇,為之分別添加如下代碼
foreach(DataGridItem di in this.DataGrid1.Items)
{
((CheckBox)di.FindControl("chkExport")).Checked=true;
}
foreach(DataGridItem di in this.DataGrid1.Items)
{
((CheckBox)di.FindControl("chkExport")).Checked=false;
}
下面分析以上上面的代碼:
問:選擇所有和取消所有選擇的按鈕是提交到服務(wù)器的,能否不提交實(shí)現(xiàn)?
答:首先明確,模板列中的checkbox是runat=server的,上面說了,在客戶端的呈現(xiàn)id是類似DataGrid1__ctl9_chkExport這樣的,所以在客戶端js取的時(shí)候我們只能通過控件.ClientID來取,如果在Page_Load的時(shí)候來取的話是取不到的,因?yàn)閏heckbox是放在DataGrid模板列中的,在Page_Load的時(shí)候DataGrid還沒有Created。解決辦法就是同上面單選的一樣,統(tǒng)一使用一個(gè)server端的隱藏域來保存多選的項(xiàng)目,然后替換模板列中的<asp:CheckBox>為html的checkbox,在選擇時(shí)候來更改隱藏域中的值(通過js,所以不會(huì)提交頁面),同樣在點(diǎn)擊多選按鈕的時(shí)候,通過讀取隱藏域中的值來得到選擇的項(xiàng)目,這樣其實(shí)是一個(gè)代碼以服務(wù)端為主到客戶端為主的一個(gè)轉(zhuǎn)變,在有的時(shí)候服務(wù)端和客戶端的交互通過隱藏域是非常方便的。在后續(xù)文章中會(huì)詳細(xì)給出跨頁面多選,同時(shí)也實(shí)現(xiàn)了客戶端選擇所有和取消所有選擇的例子。
原文地址:http://www.rzrgm.cn/lovecherry/archive/2005/03/25/125516.html
posted on 2008-09-08 16:59 失憶的硬盤 閱讀(212) 評(píng)論(0) 收藏 舉報(bào)
浙公網(wǎng)安備 33010602011771號(hào)