在Repeter中用RadioButton生成单选按钮组的实现
我们在运用Repeter绑定数据到RadioButton在前台生成单选按钮组的时候，我们可能会遇到生成的按钮并不能实现单选这种情况，即使你设置了GroupName属性，也不会起作用。这时我们就要借助于我们强大的JS了。代码如下：
前台Repeter部分代码：
<asp:Repeater ID="RepeaterYM" runat="server">
<ItemTemplate>
<li>
<asp:RadioButton ID="Year" Text='<%#Eval("Years")%>' runat="server" GroupName="Year"
ClientIDMode="Static" onclick="selectSingleRadio(this,'Year');" />年<asp:DropDownList
ID="MonthList" name="Month" Width="120" runat="server" ClientIDMode="Static">
<asp:ListItem>全部</asp:ListItem>
</asp:DropDownList>
</li>
</ItemTemplate>
</asp:Repeater>
生成的单选按钮组源码及Dome：
<ul>
<li>
<input id="Year" type="radio" name="RepeaterYM$ctl00$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2001</label>年<select name="RepeaterYM$ctl00$MonthList" id="MonthList" name="Month" style="width:120px;">
<option value="0">全部</option>
<option value="10">10月</option>
</select>
</li>
<li>
<input id="Year" type="radio" name="RepeaterYM$ctl01$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2005</label>年<select name="RepeaterYM$ctl01$MonthList" id="MonthList" name="Month" style="width:120px;">
<option value="0">全部</option>
<option value="6">6月</option>
</select>
</li>
<li>
<input id="Year" type="radio" name="RepeaterYM$ctl02$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2006</label>年<select name="RepeaterYM$ctl02$MonthList" id="MonthList" name="Month" style="width:120px;">
<option value="0">全部</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="12">12月</option>
</select>
</li>
<li>
<input id="Year" type="radio" name="RepeaterYM$ctl03$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2007</label>年<select name="RepeaterYM$ctl03$MonthList" id="MonthList" name="Month" style="width:120px;">
<option value="0">全部</option>
<option value="11">11月</option>
</select>
</li>
<li>
<input id="Year" type="radio" name="RepeaterYM$ctl04$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2008</label>年<select name="RepeaterYM$ctl04$MonthList" id="MonthList" name="Month" style="width:120px;">
<option value="0">全部</option>
<option value="1">1月</option>
<option value="6">6月</option>
</select>
</li>
<li>
<input id="Year" type="radio" name="RepeaterYM$ctl05$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2009</label>年<select name="RepeaterYM$ctl05$MonthList" id="MonthList" name="Month" style="width:120px;">
<option value="0">全部</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
</li>
<li>
<input id="Year" type="radio" name="RepeaterYM$ctl06$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2010</label>年<select name="RepeaterYM$ctl06$MonthList" id="MonthList" name="Month" style="width:120px;">
<option value="0">全部</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="7">7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="12">12月</option>
</select>
</li>
<li>
<input id="Year" type="radio" name="RepeaterYM$ctl07$Year" value="Year" onclick="selectSingleRadio(this,'Year');" /><label for="Year">2011</label>年<select name="RepeaterYM$ctl07$MonthList" id="MonthList" name="Month" style="width:120px;">
<option value="0">全部</option>
<option value="1">1月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7">7月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
</li>
</ul>
实现单选效果的JS事件：
View Code
//让repeter生成的radio组为单选
function selectSingleRadio(rbtn, GroupName) {
$("input[type=radio]").each(function (i) {
if (this.name.substring(this.name.length - GroupName.length) == GroupName) {
this.checked = false;
}
})
rbtn.checked = true;
}
//设置默认选中项
$(document).ready(function () {
var cArray = $("#rsview input[type=radio]")
var i;
for (i = 0; i < cArray.length; i++) {
if (cArray[i].checked) {
cArray[i].checked = false;
}
cArray[cArray.length - 1].checked = true;
}
});
我们现在来看看在后台是如何来遍历Repeter来加载相应组中控件的值的,代码如下：
//获得所有年月
void LoadData()
{
NewLand dataYTD = new NewLand(-1, 0);
DataSet ds = NewLandReportAdapter.Instance.GetData(dataYTD);
//筛选出不重复的年份
DataTable result = ds.Tables[0].DefaultView.ToTable(true, "Years");
RepeaterYM.DataSource = result;
RepeaterYM.DataBind();
//遍历RepeaterYM.加载各年的月份
foreach (RepeaterItem item in RepeaterYM.Items)
{
RadioButton year = (RadioButton)item.FindControl("Year");
string yearNow = year.Text;
DataView dv = ds.Tables[0].DefaultView;
dv.RowFilter = "Years=" + yearNow;
DataTable dt = dv.ToTable();
DropDownList monthlist = (DropDownList)item.FindControl("MonthList");
monthlist.DataSource = dt;
monthlist.DataTextField = "Months";
monthlist.DataValueField = "Months";
monthlist.DataTextFormatString = "{0}月";
monthlist.DataBind();
monthlist.Items.Insert(0, new ListItem("全部", "0"));
}
}
最后再看看，后台如何获得前台选中按扭的值：
//根据所选择的年份和月份生成报表
protected void SelectData_Click(object sender, EventArgs e)
{
string year = string.Empty;
string month = string.Empty;
//遍历Repeater 获得选中控件的值
foreach (RepeaterItem item in RepeaterYM.Items)
{
RadioButton yearbtn = (RadioButton)item.FindControl("Year");
if (yearbtn.Checked)
{
year = yearbtn.Text;//取得选中的年份
DropDownList monthlist = (DropDownList)item.FindControl("MonthList");//获得选中的月份
month = monthlist.SelectedValue;
}
}
}
