可以多選的下拉清單框

可以多選的下拉清單框

       自己做開發的過程中，經常有時候遇到一次要選擇多個值的情況。而用DropDownList一次隻能選擇一個，沒辦法自己最近抽空寫了一個 友善自己一戶用，不過很簡單 ，拿出來跟大家交流一下。  

界面如下：

簡單介紹一下：

      這是一個使用者控件 ，其中包含了  一個文本框 用來顯示選中Text值，一個隐藏控件  用來儲存Value值，一個button控件 用來調出選擇面闆，一根Gridview 用來綁定待選擇的值，還有4個操作按鈕，全選 取消  确定 關閉。 

代碼如下：

1、 MoreSelectBoxl.ascx

     <%@ Control Language="C#" AutoEventWireup="true" CodeFile="MoreSelectBoxl.ascx.cs" Inherits="UseControl_MoreSelectBoxl" %>

<script language="javascript" type="text/javascript">

    function Onload()

    {

        var obj = document.getElementById("SelectListBox");

        obj.style.display="block";

        obj.style.;

        obj.style.backgroundColor="#CCCCCC";

    }

</script>

<div style="width: 200px; height: 20px;">

    <asp:TextBox ID="txtText" runat="server" Width="160"></asp:TextBox>

    <asp:HiddenField ID="txtValue" runat="server" />

    <asp:Button ID="btnSelect" Text=">>" runat="server" OnClick="btnSelect_Click" />

</div>

<div id="SelectListBox"   style="width: 200px; height: 285px; position: absolute; z-index: 3000;  border:1px #666666 solid; background-color:#CCCCCC; <%=IsDisplay %>">

    <div style="width: 200px; margin: auto; height: 270px; ">

        <asp:GridView ID="gvList" Width="200"  runat="server"

            AutoGenerateColumns="false"  AllowPaging="true" PageSize="10"

            onpageindexchanging="gvList_PageIndexChanging">

            <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />

            <RowStyle BackColor="#ECF5FF" ForeColor="Black" />

            <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />

            <PagerStyle BackColor="#A6CBEF" ForeColor="Black" HorizontalAlign="Right" />

            <HeaderStyle BackColor="#A6CBEF" Font-Bold="True" ForeColor="#404040" BorderColor="#000000"  />

            <PagerStyle  HorizontalAlign="Center" ForeColor="#000000" />

            <Columns>

                <asp:TemplateField>

                <ItemStyle Width="20" Height="20" />

                    <ItemTemplate>

                        <asp:CheckBox ID="CheckID" runat="server" />

                    </ItemTemplate>

                 </asp:TemplateField>

                 <asp:TemplateField>

                    <ItemStyle Width="180" Height="20" />

                    <ItemTemplate>

                        <asp:Label ID="ItemText" runat="server" Text='<%# Eval("" + this.ItemText + "")%>'></asp:Label>                       

                    </ItemTemplate>

                 </asp:TemplateField>

                 <asp:TemplateField Visible="false">

                    <ItemTemplate>

                        <asp:Label ID="ItemValue" runat="server" Text='<%# Eval("" + this.ItemValue + "")%>'></asp:Label>                       

                    </ItemTemplate>

                 </asp:TemplateField>

            </Columns>

        </asp:GridView>

    </div>

    <div style="width:100%; text-align:center">

        <asp:Button ID="BtnAll" runat="server"  Text="全選" BackColor="#CCCCCC"

            BorderStyle="None" οnclick="BtnAll_Click" />

        <asp:Button ID="BtnCancel" runat="server"  Text="取消" BackColor="#CCCCCC"

            BorderStyle="None" οnclick="BtnCancel_Click"  />

        <asp:Button ID="BtnOk" runat="server"  Text="确定" BackColor="#CCCCCC"

            BorderStyle="None" οnclick="BtnOk_Click"  />

        <asp:Button ID="btnClose" runat="server" OnClick="btnClose_Click" Text="關閉" BackColor="#CCCCCC" BorderStyle="None"  />

    </div>

</div>

2、MoreSelectBoxl.ascx.cs

using System;

using System.Collections;

using System.Collections.Generic;

using System.Configuration;

using System.Data;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.Caching;

public partial class UseControl_MoreSelectBoxl : System.Web.UI.UserControl

{

    #region 屬性

    private Object _DataSource;

    private string _ItemText;

    private string _ItemHeaderText;

    private string _ItemValue;

    public Object DataSource

    {

        get { return this._DataSource; }

        set { this._DataSource = value; }

    }

    public string ItemText

    {

        get { return this._ItemText; }

        set { this._ItemText = value; }

    }

    public string ItemHeaderText

    {

        get { return this._ItemHeaderText; }

        set { this._ItemHeaderText = value; }

    }

    public string ItemValue

    {

        get { return this._ItemValue; }

        set { this._ItemValue = value; }

    }

    #endregion

    public string IsDisplay;

    public event EventHandler SelectButton;//事件句柄

    protected void Page_Load(object sender, EventArgs e)

    {

        IsDisplay = "Display:none";

        if (!IsPostBack)

        {  

            this.txtText.Text = "";

        }

    }

    public void BindDataSource()

    {

        gvList.ShowHeader = false;

        gvList.DataSource = this.DataSource;

        gvList.DataBind();

    }

    #region 事件

    protected void btnSelect_Click(object sender, EventArgs e)

    { 

        if (SelectButton != null)

        {

            SelectButton(this, new EventArgs());

        }

        IsDisplay = "Display:block";

        BindDataSource();

    }

    protected void btnClose_Click(object sender, EventArgs e)

    {

        IsDisplay = "Display:none";

        gvList.DataSource = null;

        gvList.DataBind();

        this.txtText.Text = "";

    }

    protected void gvList_PageIndexChanging(object sender, GridViewPageEventArgs e)

    {

        if (SelectButton != null)

        {

            SelectButton(this, new EventArgs());

        }

        IsDisplay = "Display:block";

        gvList.PageIndex = e.NewPageIndex;

        BindDataSource();

    }

    protected void BtnOk_Click(object sender, EventArgs e)

    {

        IsDisplay = "Display:block";

        string _IText = string.Empty;

        string _IValue = string.Empty;

        foreach (GridViewRow Rows in gvList.Rows)

        {

            if (((CheckBox)Rows.Cells[0].FindControl("CheckID")).Checked == true)

            {

                if (string.IsNullOrEmpty(_IText))

                {

                    _IText +=((Label)Rows.Cells[1].FindControl("ItemText")).Text.ToString().Trim().Replace(","," ");

                    _IValue += ((Label)Rows.Cells[2].FindControl("ItemValue")).Text.ToString().Trim().Replace(",", " ");

                }

                else

                {

                    _IText += "," + ((Label)Rows.Cells[1].FindControl("ItemText")).Text.ToString().Replace(",", " ");

                    _IValue += "," + ((Label)Rows.Cells[2].FindControl("ItemValue")).Text.ToString().Replace(",", " ");

                }

            }

        }

        //這裡要做檢測，内容是否存在。

        if (string.IsNullOrEmpty(this.txtText.Text.Trim()))

        {

            this.txtText.Text = _IText;

            this.txtValue.Value = _IValue;

        }

        else

        {

            this.txtText.Text +=","+_IText;

            this.txtValue.Value +=","+_IValue;

        }

        IsDisplay = "Display:none";

        gvList.DataSource = null;

        gvList.DataBind();

    }

    protected void BtnAll_Click(object sender, EventArgs e)

    {

        IsDisplay = "Display:block";

        foreach (GridViewRow Rows in gvList.Rows)

        {

            ((CheckBox)Rows.Cells[0].FindControl("CheckID")).Checked = true;

        }

    }

    protected void BtnCancel_Click(object sender, EventArgs e)

    {

        IsDisplay = "Display:block";

        foreach (GridViewRow Rows in gvList.Rows)

        {

            ((CheckBox)Rows.Cells[0].FindControl("CheckID")).Checked = false;

        }

    }

    #endregion

}