程式碼分析-DataGrid實現自增列、單選、多選

來源:互聯網
上載者:User
datagrid 上一次,我們為這個DataGrid實現了添加、刪除、修改、分頁、動態修改內容等功能,今天再來分析一下如何為之添加自增列、單選、多選的功能。
首先看一下需要在上次的基礎上增加的代碼:
(1)實現自增列
只需要在前台添加一個模板列,綁定ItemIndex+1就可以了
<asp:TemplateColumn HeaderText="選擇">
<ItemTemplate>
<%# Container.ItemIndex+1%>
</ItemTemplate>
</asp:TemplateColumn>
(2)實現單選
在上面的基礎上,為這個列加一個radio
<asp:TemplateColumn HeaderText="選擇">
<ItemTemplate>
<%# Container.ItemIndex+1%>
<input type=radio name="rad" value='<%# Container.ItemIndex+1%>'>
</ItemTemplate>
</asp:TemplateColumn>
radio的值也就是自增的1-PageSize
再建立一個按鈕(名字叫單選),為之添加如下代碼
this.Label1.Text = "選擇的行號:" + Request.Form["rad"].ToString();
這樣簡單的幾步雖然實現了顯示選擇的行號,但是在按下按鈕以後,radio的選擇是不能倍保留的,原因是這個radio不是runat=server的,我們需要再為這個頁面放置一個隱藏欄位(如runat=server)用來在點擊按鈕的時候儲存選擇的radio,在前台添加<input type="hidden" id="rd" runat="server" name="rd">(注意,不要把這個添加到DataGrid中),然後再在剛才那個按鈕中添加rd.Value = Request.Form["rad"].ToString();(如果vs.net沒有為這個HtmlInputHidden申明的話你自己加上protected System.Web.UI.HtmlControls.HtmlInputHidden rd;)。到現在位置還沒有完成,雖然HtmlInputHidden裡面已經儲存了選擇的行號,但是還需要在頁面Load的時候讓這個radio為選擇狀態,修改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中的說明),其實確切的說應該把這段代碼放到 if(!IsPostBack){}else{放到這裡}來,因為第一次載入頁面的時候,隱藏欄位裡面是不可能有東西的(第一次載入頁面你都選擇並且點擊按鈕提交,怎麼會有東西呢?)

問:\r\n是什麼東西?
答:這個是換行,放不放對代碼運行沒有影響,但是如果放了換行的話,在用戶端的呈現可以更加清晰

問:為什麼取rd的值要用document.getElementById('" + this.rd.ClientID + "').value不用document.getElementById('rd').value 呢?
答:其實在這裡你可以後者,但是要知道一點,就是rd是服務端的控制項,在某些情況下,id在用戶端的呈現不是在aspx中你指定的id了,而是控制項.ClientID,比如在DataGrid中放置的一些伺服器端控制項,查看一下原始碼可以看到id是類似DataGrid1__ctl5_Hyperlink1而不是你指定的id了

問:這裡為什麼不用RegisterClientScriptBlock呢?
答:在這裡,這也是無所謂的你可以使用RegisterClientScriptBlock,因為這段js是自啟動並執行(js+="window.onload=ld\r\n";這句)的,所以不管在form的開始或是結束呈現都不會影響到結果

(3)實現多選
首先在前台加入如下的代碼(添加一列)
<asp:TemplateColumn>
<ItemTemplate>
<input type="hidden" id="SelectedID" runat="server"
value='<%# Container.ItemIndex%>' NAME="SelectedID"/>
<asp:CheckBox ID="chkExport" Runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
為頁面加入一個按鈕(名字叫多選),為之添加以下代碼
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>";
}
}
點擊了這個按鈕就在label的位置顯示了所有選擇的項目對應的資料表主鍵的值,可以利用這個值進行一些資料庫的操作

你可以再添加兩個按鈕,一個叫選擇所有,一個叫取消所有選擇,為之分別添加如下代碼
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;
}

下面分析以上上面的代碼:

問:選擇所有和取消所有選擇的按鈕是提交到伺服器的,能否不提交實現?
答:首先明確,模板列中的checkbox是runat=server的,上面說了,在用戶端的呈現id是類似DataGrid1__ctl9_chkExport這樣的,所以在用戶端js取的時候我們只能通過控制項.ClientID來取,如果在Page_Load的時候來取的話是取不到的,因為checkbox是放在DataGrid模板列中的,在Page_Load的時候DataGrid還沒有Created。解決辦法就是同上面單選的一樣,統一使用一個server端的隱藏欄位來儲存多選的項目,然後替換模板列中的<asp:CheckBox>為html的checkbox,在選擇時候來更改隱藏欄位中的值(通過js,所以不會提交頁面),同樣在點擊多選按鈕的時候,通過讀取隱藏欄位中的值來得到選擇的項目,這樣其實是一個代碼以服務端為主到用戶端為主的一個轉變,在有的時候服務端和用戶端的互動通過隱藏欄位是非常方便的。在後續文章中會詳細給出跨頁面多選,同時也實現了用戶端選擇所有和取消所有選擇的例子。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。