天天看点

ASP.NET 下拉多选自定义控件(可以联动)

ascx页面:

<style type="text/css">

 .DivCheckBoxList 

 {

     display: none;

     border: 1px solid Gray;

     background-color: White;

     width: 100px;

     position:absolute;

     height: 200px;

     overflow-y: auto;

     overflow-x: hidden;

     margin-top: -2px;

 }      

.CheckBoxList

 {

     position: relative;

     width: 10px;

     height: 10px;

     overflow: scroll;

     font-size: small;

 }

#divCustomCheckBoxList

 {

     float:left;

     width:104px;   

 }

 .droupDownList{ float:left; width:100px; height:22px;}

 .droupListInput{ position:absolute;}

 .droupListRight{ position:absolute; margin-left:85px; margin-top:3px; width:17px; height:17px; z-index:100; background-image:url(../../Images/icon_cown.png);}

 </style>

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

      var timoutID;

      function ShowMList_<%=random %>() {

          var divRef = document.getElementById("<%=divCheckBoxList.ClientID%>");

          divRef.style.display = "block";

          var divRefC = document.getElementById("<%=divCheckBoxListClose.ClientID%>");

          divRefC.style.display = "block";

      }

     function HideMList_<%=random %>() {

          if (document.getElementById("<%=divCheckBoxList.ClientID%>") != null)

              document.getElementById("<%=divCheckBoxList.ClientID%>").style.display = "none";

          document.getElementById("<%=divCheckBoxListClose.ClientID%>").style.display = "none";

      }

     function changeInfo_<%=random %>() {         

          var ObjectText = "";

          var ObjectValue = "";

          var r = document.getElementsByName("subBox_<%=random %>");

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

              if (r[i].checked) { 

                  ObjectValue += r[i].value + ",";

                  ObjectText += r[i].nextSibling.nodeValue + ",";

              }

             document.getElementById("txtcboName_<%=random %>").value = ObjectText;

              $("#<%=hidSelectValue.ClientID %>").val(ObjectValue);

          }

         if ("true" == "<%=isAutoPostBack %>") {

              $("#<%=hidSelectCheck.ClientID %>").val("true");

              document.forms[0].submit();

          }

      }

  </script>

<div id="divCustomCheckBoxList" οnmοuseοver="clearTimeout(timoutID);" οnmοuseοut="timoutID = setTimeout('HideMList_<%=random %>()', 10);">

      <table width="100" cellpadding="0" cellspacing="0">

          <tr>

              <td align="left">

                 <div class="droupDownList">

                     <div class="droupListInput"><input id="txtcboName_<%=random %>" type="text" value="<%=SelectText %>" readonly="readonly" οnclick="ShowMList_<%=random %>()" style="width: 100px;" /></div>

                     <div class="droupListRight" οnclick="ShowMList_<%=random %>()" style="cursor:pointer"></div>

                 </div>

              </td>

              <td align="left" valign="middle"><%--  <a href="#" target="_blank" rel="external nofollow" οnclick="ShowMList()" >选择</a>--%></td>

          </tr>

          <tr>

              <td colspan="2">

                  <div id="divCheckBoxList" class="DivCheckBoxList" runat="server">

                      <%=cbostr%>

                  </div> 

                  <div id="divCheckBoxListClose" runat="server">

                  </div> 

              </td> 

          </tr>

      </table>

  </div>

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

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

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

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

ascx.cs页面:

public string cbostr { get; set; }

         public string selectID { get; set; }//复选框的value值 

         public string SelectText { get; set; } // 复选框的Text值 

         public DataTable DataSource { get; set; }//数据源 

         public string dataTextName { get; set; }//DataTextName

         public string dataValueName { get; set; } //DataValueName

         public string isAutoPostBack { get; set; }

         public string SelectedValue { get { return hidSelectValue.Value; } set { hidSelectValue.Value = value; } }//选中的字符串值 

         public string AutoPostBack { get { return hidSelectCheck.Value; } }

         protected string random = string.Empty;

        #region Page_Load

         protected void Page_Load(object sender, EventArgs e)

         {

             if (!IsPostBack)

             {

                 hidSelectValue.Value = selectID;

                 hidID.Value = this.ID;

             }

             else if (WebCommon.GetIsNullOrEmpty(isAutoPostBack).Equals("true") && WebCommon.GetIsNullOrEmpty(hidSelectCheck.Value).Equals("true"))

             {

                 hidSelectCheck.Value = string.Empty;

             }

            random = this.ID;

            BindData();

         }

         #endregion

        #region 绑定数据

        /// <summary>

         /// BindData

         /// </summary>

         protected void BindData()

         {

             string listStr = string.Empty;

             DataTable dt = DataSource;

            for (int i = 0; i < dt.Rows.Count; i++)

             {

                 string chkChecked = string.Empty;

                if (!string.IsNullOrEmpty(SelectedValue))

                 {

                     string[] arrstr = SelectedValue.Split(',');

                    if (arrstr != null)

                     {

                         for (int c = 0; c < arrstr.Length; c++)

                         {

                             if (arrstr[c] == dt.Rows[i][dataValueName].ToString())

                             {

                                 chkChecked = "checked=\"checked\"";

                                 selectID += dt.Rows[i][dataValueName] + ",";

                                 SelectText += dt.Rows[i][dataTextName] + ",";

                             }

                         }

                     }

                 }

                listStr += "<div><input type=\"checkbox\" " + chkChecked + " name=\"subBox_" + random + "\"  οnclick=\"changeInfo_" + random + "()\" value=\""

                 + dt.Rows[i][dataValueName] + "\" />" + dt.Rows[i][dataTextName] + "</div>";

             }

            cbostr = listStr;

         }

         #endregion

aspx页面:

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

<uc1:CheckboxListControl ID="ddlDept" runat="server" dataTextName="dept_name" dataValueName="dept_id" isAutoPostBack="true" />

aspx.cs页面:

/// <summary>

         /// 初始化

        /// </summary>

         /// <param name="sender"></param>

         /// <param name="e"></param>

         protected void Page_Load(object sender, EventArgs e)

         {

             ddlDept.DataSource = ListHelper.GetDept_Name_py(false);

             string depts = ddlDept.SelectedValue;

             if (!string.Empty.Equals(WebCommon.GetIsNullOrEmpty(depts)))

             {

                 depts = depts.TrimEnd(',');

             }

             else

             {

                 depts = WebCommon.Current.Dept.DEPT_ID;

             }

            if (!IsPostBack)

             {

             }

             else if (ddlDept.AutoPostBack.Equals("true") || ddlStation.AutoPostBack.Equals("true") || ddlGroup.AutoPostBack.Equals("true"))

             {

                 QueryData();

             }

         }