在GridView中的每行加入RadioButton，实现单选一行的功能

今天晚上在看到有人提这个问题：利用gridview 中的模板列加入一个RadioButton如何实现如果选择了单选的功能像RadionButtont那样一次只能选择一个，正好无事，自己尝试一下，开始通过GridView的RowDataBound事件为RadioButton加上onClientClick事件，将RadioButton的ClientID传到JS端，为JS处理做准备，因为GridView中控件的ID是比较特殊的，所以切记是传入的ClientID，然后通过JS达到RadioButtonList的效果，本以为OK啦，经测试发现，存在一个现在常见的问题，即客户端选择后，提交到服务器后取不到选中的是那一行。简单思考了一下，按照现在常见的解决办法，加入一个Hidden控件纪录下选择的RowIndex，提交到服务器后，从Hidden中取出选中的行号，使用服务器端程序的能够后续的工作，以下是完成的代码：

CS Code：

using System;


using System.Data;


using System.Configuration;


using System.Collections;


using System.Web;


using System.Web.Security;


using System.Web.UI;


using System.Web.UI.WebControls;


using System.Web.UI.WebControls.WebParts;


using System.Web.UI.HtmlControls;




public partial class GridViewRadioButton : System.Web.UI.Page




...{


protected void Page_Load(object sender, EventArgs e)




...{


GridView1.DataSource = BuildGridViewDataSource();


GridView1.DataBind();


}






/**//// <summary>


/// 用来做例子中的数据源


/// </summary>


/// <returns></returns>


private DataTable BuildGridViewDataSource()




...{


DataTable dt = new DataTable();


dt.Columns.Add("Number");




DataRow dr = dt.NewRow();


dr["Number"] = "1000";


dt.Rows.Add(dr);




dr = dt.NewRow();


dr["Number"] = "1001";


dt.Rows.Add(dr);




return dt;


}




protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)




...{


if (e.Row.RowType == DataControlRowType.DataRow)




...{


RadioButton rb = (RadioButton)e.Row.FindControl("RadioButton1");


if (rb != null)


rb.Attributes.Add("onclick", "onClientClick('" + rb.ClientID + "','" + e.Row.RowIndex + "')"); //把选中行的RowIndex也传过去，提交后在服务器端取值时用


}


}






/**//// <summary>


/// 测试取得客户端选中的行号


/// </summary>


/// <param name="sender"></param>


/// <param name="e"></param>


protected void Submit_Click(object sender, EventArgs e)




...{


//取得客户端选中是那行，可以根据这个行号进行服务器端的操作，比如存储、删除、更新...


int rowIndex = Convert.ToInt32(Hidden1.Value);




L_Msg.Text = "你选择了第 " + rowIndex + "行!";


}


}

JS Code：

<script type="text/javascript">


function onClientClick(selectedId, rowIndex)




...{


//用隐藏控件记录下选中的行号


var hidden = document.getElementById("Hidden1").value=rowIndex;





var inputs = document.getElementById("<%=GridView1.ClientID%>").getElementsByTagName("input");


for(var i=0; i <inputs.length; i++)




...{


if(inputs[i].type=="radio")




...{


if(inputs[i].id==selectedId)


inputs[i].checked = true;


else


inputs[i].checked = false;





}


}


}


</script>

Html Code：

<form id="form1" runat="server">


<div>





<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">


<Columns>


<asp:TemplateField HeaderText="操作">


<HeaderTemplate>


 


</HeaderTemplate>


<ItemTemplate>


<asp:RadioButton ID="RadioButton1" runat="server" Text="选择" />


</ItemTemplate>


</asp:TemplateField>


</Columns>


</asp:GridView>


<br /><asp:Button ID="Submit" runat="server" Text="提交" OnClick="Submit_Click" />


<br />


<br />


<asp:Label ID="L_Msg" runat="server"></asp:Label>


<input id="Hidden1" type="hidden" runat="server"/></div>


</form>