今天晚上在看到有人提这个问题:利用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 + "行!";
}
}
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 >
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 >
< 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 >