在Repeter中用RadioButton生成单选按钮组的实现
2011-12-08 22:31
411 查看
我们在运用Repeter绑定数据到RadioButton在前台生成单选按钮组的时候,我们可能会遇到生成的按钮并不能实现单选这种情况,即使你设置了GroupName属性,也不会起作用。这时我们就要借助于我们强大的JS了。代码如下:
前台Repeter部分代码:
生成的单选按钮组源码及Dome:
实现单选效果的JS事件:
View
Code
我们现在来看看在后台是如何来遍历Repeter来加载相应组中控件的值的,代码如下:
最后再看看,后台如何获得前台选中按扭的值:
前台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; }
我们现在来看看在后台是如何来遍历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; } } }
相关文章推荐
- 在Repeter中用RadioButton生成单选按钮组的实现
- 在Repeter中用RadioButton生成单选按钮组的实现
- matlab GUI界面实现单选按钮(radiobutton)
- ALV GRID中实现RadioButton单选按钮
- 为DataGrid添加RadioButton按钮,实现单选效果
- Gridview实现单选按钮(radiobutton)
- cocos2dx 3.x (单选,多选,复选checkBox按钮的实现) RadioButton
- radioButton单选按钮的实现
- RadioButton单选按钮实现RadioGroup.OnCheckedChangeListener
- matlab GUI界面实现单选按钮(radiobutton)
- Android 单选按钮RadioButton的使用
- 单选按钮、多选按钮用图片实现
- RadioButton和RadioButtonGroup按钮的实现
- 自定义单选按钮(RadioButton)的样式
- Android UI控件系列:RadioButton(单选按钮)
- C#窗体控件-单选按钮控件RadioButton
- ASP.NET中 RadioButton(单选按钮)的使用
- 使用RadioGroup与RadioButton实现单选效果
- 在repeater中实现radiobutton单选
- 自定义Dialog(图片,文字说明,单选按钮)----类ListPreference实现(2)