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="#" ο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();
             }
         }

發佈了30 篇原創文章 · 獲贊 7 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章