我們在運用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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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;
}
我們現在來看看在後臺是如何來遍歷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; } } }