可以多選的下拉式清單方塊

可以多選的下拉式清單方塊

 

       自己做開發的過程中，經常有時候遇到一次要選擇多個值的情況。而用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.border="1px #666666 solid";
        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" onclick="BtnAll_Click" />
        <asp:Button ID="BtnCancel" runat="server"  Text="取消" BackColor="#CCCCCC"
            BorderStyle="None" onclick="BtnCancel_Click"  />
        <asp:Button ID="BtnOk" runat="server"  Text="確定" BackColor="#CCCCCC"
            BorderStyle="None" onclick="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

  
}