在做泰申财务系统时有一个 样的需求:
在Repeater 里面显示多行,最后一列显示一个单选按钮。即在多行中只能选择一个。
这里一共有两种方法。
第一种方法只是简单地在 JS 里面控制每次只能选择一个。这样简化很多代码。
第二种方法盲目地想使用 Radiobutton 自己的分组功能,结果写了很多代码,而且在IE 6 上面还不能使用。没有删除只是为了以后做参考,推荐使用第一种方法。
一。
JS 代码。
function selectSingleRadio(rbtn1,GroupName) {
$("input[type=radio]").each(function(i){
if(this.name.substring(this.name.length-GroupName.length)==GroupName)
{
this.checked=false;
}
})
rbtn1.checked = true;
}
调用示例:<input type="radio" id="rbtnSelect" name ="FlowCode" value='<%# Eval("FlowCode") %>' runat="server" οnclick="selectSingleRadio(this,'FlowCode');" />
.CS
private int getFlowCode(Repeater rpt1)
{
foreach (RepeaterItem item1 in rpt1.Items)
{
HtmlInputRadioButton rbtn1 = (HtmlInputRadioButton)item1.FindControl("rbtnSelect");
if (rbtn1.Checked)
{
return Methods.getIntValue(rbtn1.Value);
}
}
return 0;
}
二。
readioButton 有一个特性,一定要name 值相同,才可以实现这种多选一的效果。
但 Reapter 控件它会自动使每一个控件的name 值都不相同。
HTML 代码:
<td>
<input type="radio" id="rbtnSelect" name ="FlowCode" class="Same"
value='<%# Eval("FlowCode") ' %> runat="server" />
<input type="hidden" id="hidFlowCode" runat="server" value='<%# Eval("FlowCode") %>' />
</td>
注意这里一定要用 runat="server" ,不然在 cs 中读不到这个控件的值。
思路:
在页面装载的 JS 里面把 name 值自动改为相同。这里的依据是之前定义的 class="Same"
$("input[class=Same]").each(function(i) {
this.name = "FlowCode";
})
cs 中使用 ViewState["FlowCode"] = Request.Form["FlowCode"]; 读到值,并保存到 ViewState 中,供后续使用。
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
ViewState["FlowCode"] = "0";
}
if (Request.Form["FlowCode"] != null)
{
ViewState["FlowCode"] = Request.Form["FlowCode"];
setRadioButton();
}
else
{
ViewState["FlowCode"] = "0";
setRadioButton();
}
}
这里之所有使用 FlowCode 是因为这个字段是主键。
因为与服务器交互以后,单选按钮的值不能保存下来,为了使操作看上去是连续的,使用下面的代码做人工处理。
protected void setRadioButton()
{
string flowCode=ViewState["FlowCode"].ToString();
foreach (RepeaterItem item1 in rptRevenueList.Items)
{
if (item1.ItemType == ListItemType.AlternatingItem || item1.ItemType == ListItemType.Item)
{
HtmlInputHidden hid1 = (HtmlInputHidden)item1.FindControl("hidFlowCode");
if (hid1.Value ==flowCode)
{
((HtmlInputRadioButton)item1.FindControl("rbtnSelect")).Checked = true;
}
else
{
((HtmlInputRadioButton)item1.FindControl("rbtnSelect")).Checked = false;
}
}
}
}