多选下拉框用户控件

标签：

多个控件组合为用户控件，实现多选

1.CSS文件

.MultDropList {display:inline-block;} .labelArea {vertical-align:super} .DropList {display:inline-block; height:20px;margin-top:5px;margin-left:2px;border:1px solid #ccc;  cursor:pointer; background:url(/UserControl/MultDropDownList/xj.png) #fff no-repeat center right; font-size:12px; line-height:20px;padding-right:10px; position:relative;} .CheckList {height:200px;overflow:auto; border:1px solid #ccc; position:absolute; background-color:#fff; z-index:999;left:0px;right:0px; display:none;padding:5px; line-height:24px; cursor:default;} .DropList:hover .CheckList{display:block;} .InputArea { font-weight:normal;border:0px}

 2.用户控件

<script>

    function GetSelectValue(control, e) {    

     var items = control.GetSelectedItems();  //获取选中值   

      var value = new Array();  //选中值集合     

    for (var i = 0; i < items.length; i++) {       

      value.push(items[i].text);       

  }    

     var values = value.join(",");   //拼接字符串      

   $(‘#<%=txtSelectText.ClientID%> input‘).val(values);

    }  

   $(function () {    

     $(window).resize(function () {      

       $(‘.CheckList .dxlbd‘).css(‘height‘, ‘100%‘);    

     });  

   });

</script>

<span class="MultDropList">    

　　 <dx:ASPxLabel runat="server" ID="labCaption" CssClass="labelArea"></dx:ASPxLabel>    

　　 <span class="DropList">

        <dx:ASPxTextBox ID="txtSelectText" runat="server" CssClass="InputArea" ReadOnly="true"></dx:ASPxTextBox>

        <div class="CheckList">     

        <dx:ASPxListBox ID="libValueList" runat="server" SelectionMode="CheckColumn" Width="100%" Height="100%" Border-BorderWidth="0px">                 <ClientSideEvents SelectedIndexChanged="GetSelectValue" />     

       </dx:ASPxListBox>    

     </div>   

  </span>

</span>

3.用户控件 后台代码

 protected void Page_Load(object sender, EventArgs e)         {             //默认加载             List<string> texts = new List<string>();             var selectItems = libValueList.SelectedItems;             foreach (var item in selectItems)             {                 texts.Add(item.ToString());             }             txtSelectText.Text = string.Join(",", texts);         }

        #region 属性         /// <summary>         /// 标题         /// </summary>         public string Caption         {             get             {                 return labCaption.Text;             }             set             {                 labCaption.Text = value+":";             }         }

        /// <summary>         /// 宽度         /// </summary>         public Unit Width         {             get             {                 return txtSelectText.Width;             }             set             {                 txtSelectText.Width = value;             }         }

        /// <summary>         ///值字段         /// </summary>         public string ValueField         {             get             {                 return libValueList.ValueField;             }             set             {                 libValueList.ValueField = value;             }         }         /// <summary>         /// 文本字段         /// </summary>         public string TextField         {             get             {                 return libValueList.TextField;             }             set             {                 libValueList.TextField = value;             }         }         /// <summary>         /// 数据源         /// </summary>         public object DataSource         {             get             {                 return libValueList.DataSource;             }             set             {                 libValueList.DataSource = value;             }         }

        /// <summary>         /// 选中的值         /// </summary>         public List<string> SelectedValues         {             get             {                 List<string> returnValue = new List<string>();                 var values = libValueList.SelectedValues;                 foreach (var item in values)                 {                     returnValue.Add(item.ToString());                 }                 return returnValue;             }                   }         /// <summary>         /// 选中的项         /// </summary>         public SelectedItemCollection SelectedItems         {             get             {                 return libValueList.SelectedItems;             }                   }         /// <summary>         /// 项         /// </summary>                public ListEditItemCollection Items         {             get             {                 return libValueList.Items;             }                   }         #endregion

        #region 方法         /// <summary>         /// 数据源绑定         /// </summary>         public void MyDataBind()         {             libValueList.DataBind();         }               #endregion  

4.使用，

1）拖拽即可

 <uc1:MultDropDownList runat="server" ID="MultDropDownList1" Caption="多选" />

2）后台添加

 MultDropDownList control = Page.LoadControl("/UserControl/MultDropDownList/MultDropDownList.ascx") as MultDropDownList;
            control.ID = "mddl1";
            control.Caption = "提示";

多选下拉框用户控件

标签：

原文地址：http://www.cnblogs.com/nygsb2014/p/4244841.html