zoukankan      html  css  js  c++  java
  • ASP.NET控件之RadioButtonList

    RadioButtonList”控件表示一个封装了一组单选按钮控件的列表控件。

    可以使用两种类型的 ASP.NET 控件将单选按钮添加到网页上:各个“RadioButton”控件或一个“RadioButtonList”控件。这两类控件都允许用户从一小组互相排斥的预定义选项中进行选择。使用这些控件,可定义任意数目的带标签的单选按钮,并将它们水平或垂直排列。

    命名空间:System.Web.UI.WebControls
    程序集:System.Web(在 system.web.dll 中)

    [ValidationPropertyAttribute("SelectedItem")]
    public class RadioButtonList : ListControl, IRepeatInfoUser, INamingContainer, IPostBackDataHandler

    RadioButtonList 控件为网页开发人员提供了一组单选按钮,这些按钮可以通过数据绑定动态生成。该控件包含一个 Items 集合,集合中的成员与列表中的各项相对应。若要确定选择了哪一项,请测试列表的 SelectedItem 属性。

    可以用 RepeatLayout 和 RepeatDirection 属性指定如何呈现列表。如果将 RepeatLayout 设置为 RepeatLayout.Table(默认设置),列表将呈现在表中。如果设置为 RepeatLayout.Flow,列表将不以表格形式呈现。默认情况下,RepeatDirection 设置为 RepeatDirection.Vertical。将该属性设置为 RepeatDirection.Horizontal 时,列表将水平呈现。

    RadioButtonList用法

                    <div class="rblStyle">
                    <asp:RadioButtonList ID="rblChangQHT" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="是" Value="1"></asp:ListItem>
                    <asp:ListItem Text="否" Value="0"></asp:ListItem>
                    </asp:RadioButtonList></div>

    1.RadioButtonList 校验

                var rb_ChangQHT = document.getElementById("rblChangQHT");
                var ShiF = rb_ChangQHT.getElementsByTagName("INPUT");
                var result = false;
                for (var i = 0; i < ShiF.length; i++) {
                    if (ShiF[i].checked) {
                        result = true;
                        break;
                    }
                }
                if (!result) {
                    alert("是否为中长期合同为必填项!");
                    return false;
                }

    2.RadioButtonList样式调整

    .rblStyle{100%;height:auto;}
    .rblStyle input{border-style:none;}

    3.onselectedindexchanged事件

    像下拉控件dropdownlist控件一样,它也有onselectedindexchanged事件,当选项改变后进行触发

    注意点是:控件中的AutoPostBack属性一定设为"True",这样服务器端才知道你的选项改变了,并触发相应事件

    4.为ListItem添加提示

                RadioButtonList1.Items[0].Attributes.Add("title", "提示内容");
    5.绑定数据源

                string sql = "select * from province";
                DataTable dt = SQLHelper.ExecuteDataTable(sql);
                this.RadioButtonList1.DataSource = dt;
                this.RadioButtonList1.DataTextField = "Provinces";
                this.RadioButtonList1.DataValueField = "PId";
                this.RadioButtonList1.DataBind();
    6.改变选中项的前景色

    <asp:RadioButtonList ID="rblIsLock" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblIsLock_SelectedIndexChanged"  RepeatDirection="Horizontal" RepeatLayout="Flow">                        

    <asp:ListItem Selected="True" Value="0">启用 </asp:ListItem>                        

    <asp:ListItem Value="1">禁用 </asp:ListItem>

    </asp:RadioButtonList>

    <label>*禁用的用户将无法登录</label>

    后台:  

    protected void rblIsLock_SelectedIndexChanged(object sender, EventArgs e)    

    {        

        var rbl = sender as RadioButtonList;        

        HighliehgSelectedItem(rbl);    

    }

    private void HighliehgSelectedItem(RadioButtonList rbl)    

    {        

        foreach (ListItem li in rbl.Items)        

       {            

         if (li.Selected)            

        {         

           li.Attributes.Add("style", "color: red;");            

         }        

       }    

    }

    7.后台动态增加RadioButtonList

                        RadioButtonList rbl = new RadioButtonList();
                        rbl.ID = "rbl" + (i + 1).ToString();
                        rbl.BorderStyle = BorderStyle.None;
                        rbl.RepeatLayout = RepeatLayout.Flow;
                        rbl.RepeatDirection = RepeatDirection.Horizontal;
                        rbl.TextAlign = TextAlign.Right;
                        rbl.CellSpacing = 6;
                        rbl.Attributes.Add("onclick", "CheckRbl('ctl00_ctl00_ctl00_ContentPlaceHolder1_cphBody_cphLower_" + rbl.ID + "')");
                        rbl.DataSource = dtRating.DefaultView;
                        rbl.DataTextField = "LevelID";
                        rbl.DataValueField = "LevelID";
                        rbl.DataBind();
                        tc.Controls.Add(rbl); //tc是TableRow的一个单元格TableCell

                        for (int k = 0; k < rbl.Items.Count; k++)
                        {
                            rbl.Items[k].Attributes.Add("title", dtRating.Rows[k][1].ToString());
                            rbl.Items[k].Attributes.Add("style", "margin-left:10px;");
                        }

    8.前台改变选中项的背景色

                window.onload = function () {
                var arr = document.getElementsByTagName("INPUT");
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].checked) {
                        if (arr[i].type == "radio") {
                            arr[i].style.backgroundColor = "red";
                        }
                        else {
                            arr[i].style.backgroundColor = "";
                        }
                    }
                    else {
                        arr[i].style.backgroundColor = "";
                    }
                }
            }

  • 相关阅读:
    04_远程管理常用命令
    03_文件和目录常用命令
    02_Linux 终端命令格式
    01_常用 Linux 命令的基本使用
    test
    centOS 7 更改root密码
    安装 centos7
    1
    IO模型
    使用git连接到Github
  • 原文地址:https://www.cnblogs.com/joesphos/p/5622818.html
Copyright © 2011-2022 走看看