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

来源：互联网发布：php base64 编辑：程序博客网时间：2024/06/05 16:56

在做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;}

测试页面效果
页面运行效果1
页面运行效果2
页面运行效果3
页面运行效果4
页面运行效果5

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

3 0