多个控件组合为用户控件，实现多选
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 = "提示";