我爱学习网首页 | 设为首页 | 收藏本站 | 网站地图 您好,欢迎光临我爱学习网
我爱学习网

当前位置:首页 > 编程开发 > asp.net教程 >

如何实现DropDownList下拉多选功能?

时间:2014-06-12 11:51 来源:我爱学习网 | 作者:hua888 | 本文已影响
如何实现DropDownList下拉多选功能?DropDownList没有Checkbox,实现不了多选,只能自己编写程序。为了方便使用,在这里编写个用户控件分享给大家,希望对你们有所帮助。


前台代码
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CheckboxListControl.ascx.cs"
    Inherits="Manager_UserControl_CheckboxListControl" %>
<style type="text/css"> 
    .DivCheckBoxList
    {
        display: none;
        border: 1px solid Gray;
        background-color: White;
        width: 126px;
        position:absolute;
        height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: -10px;
    }
    
    .CheckBoxList
    {
        position: relative;
        width: 150px;
        height: 10px;
        overflow: scroll;
        font-size: small;
    }
</style>
<script type="text/javascript">
   
    var timoutID;
    function ShowMList() {
        var divRef = document.getElementById("divCheckBoxList");
        divRef.style.display = "block";
        var divRefC = document.getElementById("divCheckBoxListClose");
        divRefC.style.display = "block";
    }

    function HideMList() {
        if (document.getElementById("divCheckBoxList")!=null)
        document.getElementById("divCheckBoxList").style.display = "none";
        document.getElementById("divCheckBoxListClose").style.display = "none";
    }
    function changeinfo() {
        var ObjectText = "";
        var ObjectValue = "";
        var r = document.getElementsByName("subBox");
        for (var i = 0; i < r.length; i++) {
            if (r[i].checked) {
                ObjectValue += r[i].value + ",";
                ObjectText += r[i].nextSibling.nodeValue + ",";
            }
            document.getElementById("txtcboName").value = ObjectText;
            $("#hdscbo").val(ObjectValue);
        }
    }
</script>
<div id="divCustomCheckBoxList" onmouseover="clearTimeout(timoutID);" onmouseout="timoutID = setTimeout('HideMList()', 750);">
    <table width="150px">
        <tr>
            <td align="right">
                <asp:HiddenField runat="server" ID="hdscbo"></asp:HiddenField>
                <input id="txtcboName" type="text" value="<%=cboName %>" readonly="readonly" onclick="ShowMList()"
                    style="width: 130px;" />
            </td>
            <td align="left" valign="middle">
              <%--  <a href="#" onclick="ShowMList()" >选择</a>--%>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="divCheckBoxList" class="DivCheckBoxList">
                    <%=cbostr%>
                </div>
                <div id="divCheckBoxListClose">
                    &nbsp;
                </div>
            </td>
        </tr>
    </table>
</div>

后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.MobileControls;
using System.Data;

public partial class Manager_UserControl_CheckboxListControl : System.Web.UI.UserControl
{
    public string cbostr { get; set; }
    public string cboID { get; set; }//复选框的value值
    public string cboName { get; set; } // 复选框的Text值
    public DataSet dtDataList{get;set;}//数据源
    public string cboselectedValue { get; set; }//选中的字符串值

    protected void Page_Load(object sender, EventArgs e)
    {
        hdscbo.Value = cboID;
        BindData();
    }
    #region 绑定数据

    protected void BindData()
    { 
        string liststr = "";
        DataTable dt = new DataTable();
        if (CheckDataSet(dtDataList,out dt))
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                string chkchecked = "";
                if (!string.IsNullOrEmpty(cboselectedValue))
                {
                    string[] arrstr = cboselectedValue.Split(',');
                    if (arrstr != null)
                    {
                        for (int c = 0; c < arrstr.Length; c++)
                        {
                            if (arrstr[c] == dt.Rows[i]["sCode"].ToString())
                            {
                                chkchecked = "checked=\"checked\"";
                                cboID += dt.Rows[i]["sCode"] + ",";
                                cboName += dt.Rows[i]["sName"] + ",";
                            }
                        }
                    }
                }
                liststr += "<div><input type=\"checkbox\"   " + chkchecked + " name=\"subBox\"    onclick=\"changeinfo()\" value=\"" + dt.Rows[i]["sCode"] + "\" />" + dt.Rows[i]["sName"] + "</div>";
            }
        }
       cbostr = liststr;
    }
    #endregion


       /// <summary>
        /// 检查dataset是否有值
        /// </summary>
        /// <param name="ds"></param>
        /// <returns></returns>
        public static bool CheckDataSet(DataSet ds, out DataTable dt)
        {
            if (ds.Tables.Count > 0)
            {
                if (ds.Tables[0].Rows.Count > 0)
                {
                    dt = ds.Tables[0];
                    return true;
                }
                else
                {
                    dt = null;
                    return false;
                }
            }
            else
            {
                dt = null;
                return false;
            }
        }
}

aspx 页面调用
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddTeacher.aspx.cs" Inherits="Manager_Page_AddTeacher" %>

<%@ Register Src="../../UserControl/CheckboxListControl.ascx" TagName="CheckboxListControl"
    TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server"></head>
<body>
   
    <form id="form1" runat="server">
 <uc1:CheckboxListControl ID="cbosDeparentment" runat="server" />
    </form>
</body>

</html>
 protected void Page_Load(object sender, EventArgs e)
    {
     cbosDeparentment.dtDataList = GetDataList();//操作数据库,获得数据集dataset
     cbosDeparentment.cboselectedValue = "语文组,数学组";//编辑时,可把字符串赋值到该参数
}
(责任编辑:hua888)

更多技巧文章请关注公众号:huixiang_360


分享到: 更多