自定义EasyUI下拉单选和下拉多选控件

在做web页面时常常会用到EasyUI增加页面的效果，今天自定义两个EasyUI的控件，下拉单选和下拉多选，
在使用EasyUI时需要引用EasyUI的样式和js ,提供一个下载地址http://www.jeasyui.net/download/
废话不多说，直接切入主题

下拉多选控件

新建一个Web用户自定义控件WebSelection.ascx

前台页面代码

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebSelection.ascx.cs" Inherits="Easyu.Controls.WebSelection" %>
//添加一个下拉控件，指定样式easyui-combotree，根据自己需求设定控件的宽高
<select id="<%=this.ID %>" class="easyui-combotree" style="width: 205px; height: 24px;"></select>
//设置该控件的数据和属性
<script type="text/javascript">
    //绑定下拉多选数据列表
    var json = <%=JsonString%> //后台获取的Josn字符串
    $('#<%=this.ID %>').combotree({
        valueField: "id", //Value字段
        textField: "text",//Text字段
        multiple: true,
        panelHeight: 'auto',
        data: json, //数据源
        onCheck: function (node, checked) {
            //让全选不显示
            $("#<%=this.ID %>").combotree("setText", $("#<%=this.ID %>").combobox("getText").toString().replace("全选,", ""));
        },
        onClick: function (node, checked) {
            //让全选不显示
            $("#<%=this.ID %>").combotree("setText", $("#<%=this.ID %>").combobox("getText").toString().replace("全选,", ""));
        }
    });
    //获取选中的值
    function GetSelectionValue(obj)  
    {
        var SelectionValue = "";
        //控件使用时会将控件名称WebSelection设置为该控件的ID，在使用方法GetSelectionValue(obj) 时，不给该方法传入参数，则使用默认的ID，如何不传参数，并且修改了控件的ID，那么GetSelectionValue(obj) 方法将获取不到值
        var id = obj == undefined ? "WebSelection" : obj;
        if ($("#" + id + "").combobox("getText") == "") { SelectionValue = ""; }
        else {
            SelectionValue = $("#" + id + "").combobox("getText").toString();
            if (SelectionValue.substr(0, 1) == ",") {
                SelectionValue = SelectionValue.substring(1, SelectionValue.length);
            }
        }
        return SelectionValue;
    }
    //获取选中的ID
    function GetSelectionID(obj) 
    {
        var SelectionID = "";
        //控件使用时会将控件名称WebSelection设置为该控件的ID，在使用方法GetSelectionID(obj) 时，不给该方法传入参数，则使用默认的ID，如何不传参数，并且修改了控件的ID，那么GetSelectionID(obj) 方法将获取不到值
        var id = obj == undefined ? "WebSelection" : obj;
        if ($("#" + id + "").combobox("getValues") == "") { SelectionID = ""; }
        else {
            SelectionID = $("#" + id + "").combobox("getValues").toString();
            if (SelectionID.substr(0, 1) == ",") {
                SelectionID = SelectionID.substring(1, SelectionID.length);
            }
        }
        return SelectionID;
    }

</script>

后台页面代码

    public partial class WebSelection : System.Web.UI.UserControl
    {
        public static string JsonString = string.Empty;
        public static string HelisStr = string.Empty;
        /// <summary>
        /// 数据源
        /// </summary>
        public List<ControlTools> controllist { get; set; }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //拼接Json
                if (controllist != null && controllist.Count > 0)
                {
                    JsonString = "";
                    HelisStr = "";
                    JsonString = "[{ \"id\": \"\",\"text\": \"全选\", \"children\": [";
                    for (int i = 0; i < controllist.Count; i++)
                    {
                        if (controllist[i].Value != "" && controllist[i].ID != "")
                        {
                            HelisStr += "'" + controllist[i].Value + "',";
                            JsonString += "{\"id\":\"'" + controllist[i].ID + "'\",\"text\":\"" + controllist[i].Value + "\"},";
                        }
                    }
                    JsonString += "  ]}]";
                    if (HelisStr != "")
                    {
                        HelisStr = HelisStr.Substring(0, HelisStr.Length - 1);
                    }
                }

            }
        }
    }

在此之前我们需要创建一个类ControlTools，

 public class ControlTools
  {
      /// <summary>
      /// ID
      /// </summary>
      public string ID { get; set; }
      /// <summary>
      /// Value
      /// </summary>
      public string Value { get; set; }
  }

在调用该用户自定义控件时页面利用该类给控件赋值

下拉单选控件

新建一个Web用户自定义控件WebSingleSelection.ascx

前台页面代码

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebSingleSelection.ascx.cs" Inherits="Easyu.Controls.WebSingleSelection" %>
//添加一个下拉控件，指定样式easyui-combotree，根据自己需求设定控件的宽高
<select id="<%=this.ID %>" class="easyui-combobox" style="width: 205px; height: 24px;"></select>
<script type="text/javascript">
    //绑定下拉单选数据列表
    var json = <%=JsonString%>
    $('#<%=this.ID %>').combotree({
        valueField: "id",
        textField: "text",
        panelHeight: 'auto',
        data: json
    });
    //获取选中的值
    function GetSingleSelectionValue(obj)
    {
        var SingleSelectionValue = "";
        var id = obj == undefined ? "WebSingleSelection" : obj;
        if ($("#" + id + "").combobox("getText") == "") { SingleSelectionValue = ""; }
        else {
            SingleSelectionValue = $("#" + id + "").combobox("getText").toString();
            if (SingleSelectionValue.substr(0, 1) == ",") {
                SingleSelectionValue = SingleSelectionValue.substring(1, SingleSelectionValue.length);
            }
        }
        return SingleSelectionValue;
    }
    //获取选中的ID
    function GetSingleSelectionID(obj)
    {
        var SingleSelectionID = "";
        var id = obj == undefined ? "WebSingleSelection" : obj;
        if ($("#" + id + "").combobox("getValues") == "") { SingleSelectionID = ""; }
        else {
            SingleSelectionID = $("#" + id + "").combobox("getValues").toString();
            if (SingleSelectionID.substr(0, 1) == ",") {
                SingleSelectionID = SingleSelectionID.substring(1, SingleSelectionID.length);
            }
        }
        return SingleSelectionID;
    }

</script>

后台页面代码

public partial class WebSingleSelection : System.Web.UI.UserControl
 {
      public static string JsonString = string.Empty;
      public static string HelisStr = string.Empty;
      /// <summary>
      /// 数据源
      /// </summary>
      public List<ControlTools> controllist { get; set; }
      protected void Page_Load(object sender, EventArgs e)
      {
          if (!IsPostBack)
          {
             //拼接Json
              if (controllist != null && controllist.Count > 0)
              {
                  JsonString = "";
                  HelisStr = "";
                  JsonString = "[";
                  for (int i = 0; i < controllist.Count; i++)
                  {
                      if (controllist[i].Value != "" && controllist[i].ID != "")
                      {
                          HelisStr += "'" + controllist[i].Value + "',";
                          JsonString += "{\"id\":\"" + controllist[i].ID + "\",\"text\":\"" + controllist[i].Value + "\"},";
                      }
                  }
                  JsonString += "]";
                  if (HelisStr != "")
                  {
                      HelisStr = HelisStr.Substring(0, HelisStr.Length - 1);
                  }
              }

          }
      }
  }

新建测试页面TestPage.aspx

前台代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
   <%--引用easyui样式及js--%>
    <link href="../jquery-easyui-1.4.3-1/themes/default/easyui.css" rel="stylesheet" />
    <link href="../jquery-easyui-1.4.3-1/themes/icon.css" rel="stylesheet" />
    <script src="../jquery-easyui-1.4.3-1/jquery-1.7.2.min.js"></script>
    <script src="../jquery-easyui-1.4.3-1/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        //下拉多选获取值
        function WebSelectionGetValue()
        {
            var value = GetSelectionValue();
            alert(value);
        }
        //下拉多选获取ID
        function WebSelectionGetID()
        {
            var id = GetSelectionID();
            alert(id);
        }
        //下拉单选获取值
        function WebSingleSelectionGetValue() {
            var value = GetSingleSelectionValue();
            alert(value);
        }
        //下拉单选获取ID
        function WebSingleSelectionGetID() {
            var id = GetSingleSelectionID();
            alert(id);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        下拉多选：
        <uc1:WebSelection runat="server" ID="WebSelection" />
        <input  type="button" value="GetValue" onclick="WebSelectionGetValue();" />
        <input  type="button" value="GetID" onclick="WebSelectionGetID();" />
    </div>
    <div>
        下拉单选：
        <uc1:WebSingleSelection runat="server" ID="WebSingleSelection" />
        <input type="button" value="GetValue" onclick="WebSingleSelectionGetValue();" />
        <input type="button" value="GetID" onclick="WebSingleSelectionGetID();" />
    </div>
    </form>
</body>
</html>

后台代码

protected void Page_Load(object sender, EventArgs e)
{
    Bind();
}
public void Bind()
{
   DataTable dt= new DataTable();//这里是需要绑定的数据源
   List<ControlTools> list = new List<ControlTools>();
   for (int i = 0; i < dt.Rows.Count; i++)
   {
       list.Add(new ControlTools { ID = dt.Rows[i]["ID"].ToString(), Value = dt.Rows[i]["Name"].ToString() });
   }
   WebSelection.controllist = list;
   WebSingleSelection.controllist = list;
}

测试页面效果

以上代码本人亲测，效果图片已经贴出，在控件数据源这里，用户大可根据自己的需求来适当进行调整，本人做的这两个控件只要将数据源配好，基本上是通用的，不喜勿喷