发布一个基于jquery的无限层级下拉控件

最新推荐文章于 2021-09-28 10:46:50 发布
最新推荐文章于 2021-09-28 10:46:50 发布
阅读量2.3k 收藏
点赞数 2
分类专栏： javascript 文章标签： jquery string function dataset getjson json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ayun00/article/details/6707491
版权
 
效果如下
选择前(可以初始化选择项)
 
选择后(可以一直选择到最后一项)
 
有选择的初始化
 
原因来源于jAutoComboBox2插件的使用中 效果总是有偏差,所以编写了此脚本
重写了大部分逻辑
Version 0.9.0
Date: 2011-8-22 
Original author zlddian
Modified By ayun00
Email: ayun00@sina.com

允许自由复制,自由使用,请不要修改以上信息
如果有修改请mail我一份
也欢迎各位提出修改意见

数据格式 var data = [{ "id": 25, "text": "淮安分公司", "children": [{ "id": 26, "text": "办公室（行政人事培训）", "children": [{ "id": 28, "text": "办公室（行政人事培训333）", "children": [{ "id": 30, "text": "办公室（行政人事培训333）"}]}] }, { "id": 29, "text": "办公室（行政人事培训2）"}] }, { "id": 52, "text": "研发部", "children": [{ "id": 54, "text": "研发部2222"}] }, { "id": 53, "text": "财务部"}];

id: 填充select的 value
text: 填充select 的 text
children: 下一级的数据

主函数
ComboBoxGetValue 得到指定 层级的 selec 值或者text , 层级 留空为取最后一级select
ComboBoxGetAllPath 得到从第一个select 到最后一个select 的 selec 值或者text 字符串 


调用方式
$("#div_UnlimitedSelect").UnlimitedSelect({
  cssClass: "autoComboBox",
  nullDispaly: true,
  data: data,
  firstValue: [true, "==请选择==", "==请选择=="],
  defaultValue: 29
  });
  });
  function getval() {
  var a = $("#div_autoComboBox").ComboBoxGetValue(null, "value", ErrorFn);
  alert(a);
  }
  function getalltext() {
  var a = $("#div_autoComboBox").ComboBoxGetAllPath("text", "-");
  alert(a);
  }

  function ErrorFn() {
  alert("错误了");
  }
  
/*
编写此脚本的原因来源于jAutoComboBox2插件的使用
//重写了大部分逻辑
Version 0.9.0
Date: 2011-8-22 
Original author zlddian
Modified By   ayun00
Email: ayun00@sina.com

允许自由复制,自由使用,请不要修改以上信息
如果有修改请mail我一份
也欢迎各位提出修改意见

数据格式 var data = [{ "id": 25, "text": "淮安分公司", "children": [{ "id": 26, "text": "办公室（行政人事培训）", "children": [{ "id": 28, "text": "办公室（行政人事培训333）", "children": [{ "id": 30, "text": "办公室（行政人事培训333）"}]}] }, { "id": 29, "text": "办公室（行政人事培训2）"}] }, { "id": 52, "text": "研发部", "children": [{ "id": 54, "text": "研发部2222"}] }, { "id": 53, "text": "财务部"}];

id: 填充select的 value
text: 填充select 的 text
children: 下一级的数据

主函数
ComboBoxGetValue 得到指定 层级的 selec 值或者text , 层级 留空为取最后一级select
ComboBoxGetAllPath 得到从第一个select 到最后一个select 的  selec 值或者text 字符串 


调用方式
$("#div_UnlimitedSelect").UnlimitedSelect({
                cssClass: "autoComboBox",
                nullDispaly: true,
                data: data,
                firstValue: [true, "==请选择==", "==请选择=="],
                defaultValue: 29
            });
        });
        function getval() {
            var a = $("#div_autoComboBox").ComboBoxGetValue(null, "value", ErrorFn);
            alert(a);
        }
        function getalltext() {
            var a = $("#div_autoComboBox").ComboBoxGetAllPath("text", "-");
            alert(a);
        }

        function ErrorFn() {
            alert("错误了");
        }


*/

(function() {

    $.extend($.fn, {
        //开始

        //初始化
        UnlimitedSelect: function(op) {
            op = $.extend({
                url: false,                         //获取数据的地址
                remote: false, 					//是否进行远程请求     
                type: "POST",                         //请求远程数据的方式 get/post
                quest: "q", 						//请求的参数名
                data: true,                         //数据(Json格式)  只有当url参数设置为false时该参数才生效 否则优先从远程url获取数据
                isWebservice: false,                 //数据是否来源于web服务 (下个版本实现)
                cssClass: false,                    //下拉框使用的class样式
                firstValue: [true, "0", "请选择"],  //是否自动创建第一个值  这个值通常为 请选择 ,不限等
                idPrefix: "Unlimited_Select_ID",       //自动生成下拉框的 默认ID前缀
                defaultValue: false,                 //如果此值不为false  将根据该值设置默认值 并且递归向上设置所有的下拉框默认值

                nullDispaly: true,    //是否显示所有子层级(第一个下拉项值的子层级) //下个版本实现

                onchange: null,     //改变下拉框时候触发的事件
                onchangeresult: null         // 定值为returntype 的 text, value  ,如果不为空返回当前类型
            }, op);

            var c = this;
            if (op.remote) {    //从远程获取数据
                c.remoteajax(c, op, 1, "", op.defaultValue);
            }
            else {
                if (op.defaultValue) {  //得到默认值的层级,如果有默认值
                    c.path = c.getpath(op.data, [], op.defaultValue, 0);
                    if (!c.issearc) {
                        c.path = [];
                    }
                }
                c.CreateOption(c, 1, op, op.data, true);
            }

        },
        // o 当前UnlimitedSelect对象
        // index 当前层级
        // op  参数
        // data 当前层级的数据
        // 是否第一次填充
        CreateOption: function(o, index, op, data, isfirst) {
            if (data.length > 0) {
                var $select;
                if (o.find("#" + op.idPrefix + index).length > 0) {      //查询当前递归的下拉框是否存在 如果存在则删除
                    $select = o.find("#" + op.idPrefix + index);
                    $select.get(0).options.length = 0;
                }
                else {
                    $select = $('<select id="' + op.idPrefix + index + '" index="' + index + '"/>');   //创建新的下拉框
                    o.append($select);
                }
                //附加用户自定义下拉框样式
                if (op.cssClass) {
                    $select.addClass(op.cssClass);
                }

                var ComboBox = this;
                var tempOption = '';
                if (op.firstValue[0]) {
                    tempOption += "<option value='" + op.firstValue[1] + "'>" + op.firstValue[2] + "</option>"
                }
                $.each(data, function(i, item) {
                    if (o.path[index - 1] == item.id && isfirst) {
                        tempOption += "<option value='" + item.id + "' selected='selected' >" + item.text + "</option>"
                    }
                    else {
                        tempOption += "<option value='" + item.id + "'>" + item.text + "</option>"
                    }
                });
                $select.empty().append(tempOption);
                //绑定下拉框 onchange事件开始
                $select.change(function() {
                    //绑定下拉框 onchange事件
                    if ($.isFunction(op.onchange)) {
                        //根据onchangeresult 向 自定义事件传递 全路径
                        var rb;
                        if (op.onchangeresult) {
                            rb = o.ComboBoxGetAllPath(op.onchangeresult);
                        }
                        op.onchange(rb);
                    }
                    //
                    nextIndex = index + 1;
                    //创建后面的下拉框的时候 必须清除所有后面的下拉框						
                    var j = nextIndex;
                    while (true) {
                        //寻找当前下拉框的 							
                        $select = o.find("#" + op.idPrefix + j);
                        if ($select.length > 0)
                            $select.remove();
                        else {
                            break;
                        }
                        j++;
                    }
                    //回调递归
                    var val = $(this).val();
                    if (op.remote) {
                        ComboBox.remoteajax(o, op, nextIndex, val, op.defaultValue);
                    }
                    else {
                     
                        //遍历当前项,如果有子项,进行创建
                        $.each(data, function(i, item) {
                            if (item.id == val) {
                                if (item.children) {
                                    ComboBox.CreateOption(o, nextIndex, op, item.children);   //change时 回调该方法
                                    add = true;
                                    return false;
                                }
                            }
                        });
                    }

                });
                //绑定下拉框 onchange事件结束
                //如果有默认值,并且再下一级中 那么创建下一个下拉框                
                if (ComboBox.path.length >= index && isfirst) {
                    ComboBox.CreateOption_NotFirst(o, index + 1, ComboBox.path[index - 1], op, data);
                    //ComboBox.CreateOption(o, index+1, op, data.children,false); 
                }
            }
        },

        CreateOption_NotFirst: function(o, index, val, op, data) {
            var ComboBox = this;
            $.each(data, function(i, item) {
                if (item.id == val) {
                    if (item.children) {
                        ComboBox.CreateOption(o, index, op, item.children, true);   //找到默认值 回调方法
                        return false;
                    }
                }
                /*  if (item.children) {
                ComboBox.CreateOption_NotFirst(o, index, val, op, item.children);
                }*/
            });
        },

        /*
        请求当前最后一个select的全路径
        value_text_rec value 还是 text
        splitstr 连接符
        errFn 错误回调函数		
        */
        ComboBoxGetAllPath: function(value_text_rec, splitstr, errFn) {
            var s = this.find("select");
            if (value_text_rec) {

            }
            else {
                value_text_rec = "value";
            }
            if (splitstr)
            { }
            else {
                splitstr = "";
            }
            try {
                switch (value_text_rec) {
                    case "value":
                        var rtn;
                        for (var i = 0; i < s.length; i++) {
                            if (!rtn) {
                                rtn = s.eq(i).val();
                            }
                            else {
                                rtn += splitstr + s.eq(i).val();
                            }
                        }
                        return rtn
                    case "text":
                        var rtn;
                        for (var i = 0; i < s.length; i++) {
                            if (!rtn) {
                                rtn = s.eq(i).find('option:selected').text();
                            }
                            else {
                                rtn += splitstr + s.eq(i).find('option:selected').text();
                            }
                        }
                        return rtn
                }
            }
            catch (err) {
                if (errFn) {
                    errFn(err);
                }
                return "";
            }
        },
        /*
        返回第几级的值  默认返回最后一个下拉框的值  不过不满足条件弹出自定义错误消息
        */
        ComboBoxGetValue: function(Atleast, value_text_rec, errFn) {
            var s = this.find("select");
            if ((Atleast) || (Atleast == 0)) {
                if (s.length - 1 >= Atleast) {
                    if (value_text_rec) {
                        switch (value_text_rec) {
                            case "value":
                                return s.eq(Atleast).val();
                            case "text":
                                return s.eq(Atleast).find('option:selected').text();
                            case "rec":
                                return s.eq(Atleast);
                        }
                    }
                    else {
                        return s.eq(Atleast).val();
                    }
                }
                else {
                    if (errFn) {
                        errFn();
                    }
                    return "";
                }
            }
            else {
                if (value_text_rec) {
                    switch (value_text_rec) {
                        case "value":
                            return s.eq(s.length - 1).val();
                        case "text":
                            return s.eq(s.length - 1).find('option:selected').text();
                        case "rec":
                            return s.eq(s.length - 1);
                    }
                }
                else {
                    return s.eq(s.length - 1).val();
                }
            }
        },

        /*
        c 当前对象
        op 参数
        index 当前层级
        rid 请求的值
        defaultValue 默认值
        */
        remoteajax: function(c, op, index, rid, defaultValue) {
            $.ajax({
                type: op.type,
                url: op.url,
                data: "defaultValue=" + defaultValue + "&" + op.quest + "=" + rid,
                success: function(msg) {
                    op.data = eval(msg);
                    //重新得到 默认层级
                    if (op.defaultValue) {  //得到默认值的层级,如果有默认值
                        c.path = c.getpath(op.data, [], op.defaultValue, 0);
                    }
                    if (!c.issearc) {
                        c.path = [];
                    }
                    c.CreateOption(c, index, op, op.data);

                }, error: function() {
                    alert("not connection server");
                }
            });
        },

        issearc: false,
        //data  遍历数据
        //org 返回的数组
        //寻找的id
        //层次
        getpath: function(data, org, id, levle) {

            var ddd = this;
            if (typeof levle == "undefined") {
                levle = 0;
            }
            var curlevele = levle;
            $.each(data, function(i, v) {
                if (!ddd.issearc) {
                    console.log("查找项:" + id + "当前值" + v.id + ",当前深度:" + curlevele + ",当前arr:" + org.join(','));
                    if (v.id == id) {
                        org[curlevele] = id;
                        ddd.issearc = true;
                        //清除大于当前路径的值
                        //console.log("长度" + org.length + ",当前深度:" + curlevele);
                        if (curlevele < org.length) {
                            org.splice(curlevele + 1, org.length - curlevele);
                        }
                        return false;
                    }
                    //递归
                    else if (v.children) {
                        org[curlevele] = v.id;
                        org = ddd.getpath(v.children, org, id, curlevele + 1);
                    }
                }
                else {
                    return false;
                }
            });
            return org;
        },
        //当前层级
        path: [],
        returntype: ["value", "text"]



        //结束
    });




})(jQuery);

附一个本例json格式生成 C#代码 
using System;
using System.Collections.Generic;
using System.Data;
using System.Text;

namespace Common
{
    /// <summary>
    /// UnlimitedSelect辅助类
    /// </summary>
    public class UnlimitedSelect
    {
        /// <summary>
        /// AutoComboBox的ajax返回json数据
        /// </summary>
        /// <param name="dataset"></param>
        /// <param name="TextColumnName"></param>
        /// <param name="IdColumnName"></param>
        /// <param name="PidColumnName"></param>
        /// <param name="OpenFirst"></param>
        /// <returns></returns>
        public static string DataSetToTree(DataSet dataset, string TextColumnName, string IdColumnName, string PidColumnName, bool OpenFirst)
        {
            return DataTableToTree(dataset.Tables[0], 0, TextColumnName, IdColumnName, PidColumnName, OpenFirst);
        }

        public static string DataSetToTree(DataSet dataset, int id, string TextColumnName, string IdColumnName, string PidColumnName, bool OpenFirst)
        {
            return DataTableToTree(dataset.Tables[0], id, TextColumnName, IdColumnName, PidColumnName, OpenFirst);
        }

        public static string DataTableToTree(DataTable datatable, string TextColumnName, string IdColumnName, string PidColumnName, bool OpenFirst)
        {
            return Tojson(datatable, 0, TextColumnName, IdColumnName, PidColumnName, OpenFirst);
        }

        public static string DataTableToTree(DataTable datatable, int id, string TextColumnName, string IdColumnName, string PidColumnName, bool OpenFirst)
        {
            return Tojson(datatable, id, TextColumnName, IdColumnName, PidColumnName, OpenFirst);
        }

        private static List<string> GetConfig()
        {
            List<string> list = new List<string>();
            list.Add("\"id\"");
            list.Add("\"text\"");
            list.Add("\"iconCls\"");
            list.Add("\"state\"");
            return list;
        }

        private static string Getjson(DataTable datatable, int id, string TextColumnName, string IdColumnName, string PidColumnName, bool OpenFirst)
        {
            DataRow[] rowArray = datatable.Select(PidColumnName + "=" + id.ToString());
            if (rowArray.Length == 0)
            {
                return string.Empty;
            }
            StringBuilder builder = new StringBuilder();
            List<string> config = GetConfig();
            int num = 0;
            foreach (DataRow row in rowArray)
            {
                builder.Append("{");
                for (int i = 0; i < 2; i++)
                {
                    if (i != 0)
                    {
                        builder.Append(",");
                    }
                    switch (i)
                    {
                        case 0:
                            builder.Append(config[i]);
                            break;

                        case 1:
                            builder.Append(config[i]);
                            break;
                    }
                    if (i == 0)
                    {
                        builder.Append(":");
                    }
                    else
                    {
                        builder.Append(":\"");
                    }
                    switch (i)
                    {
                        case 0:
                            builder.Append(row[IdColumnName].ToString());
                            break;

                        case 1:
                            builder.Append(row[TextColumnName].ToString());
                            break;
                    }
                    if (i != 0)
                    {
                        builder.Append("\"");
                    }
                }
                string str = "";
                string json = Getjson(datatable, Convert.ToInt32(row[IdColumnName]), TextColumnName, IdColumnName, PidColumnName, false);
                str = (str + ",\"children\":[") + json + "]";
                if (str != ",\"children\":[]")
                {
                    builder.Append(str);
                    if (!OpenFirst)
                    {
                        builder.Append(",\"state\":\"closed\"");
                    }
                }
                builder.Append("},");
                num++;
            }
            if (builder.ToString() == "")
            {
                return "";
            }
            return builder.ToString().Substring(0, builder.ToString().Length - 1);
        }

        private static string Tojson(DataTable datatable, int id, string TextColumnName, string IdColumnName, string PidColumnName, bool OpenFirst)
        {
            string str = Getjson(datatable, id, TextColumnName, IdColumnName, PidColumnName, OpenFirst);
            if (str != "")
            {
                str = "," + str;
            }
            return ("[{\"id\":0,\"text\":\"全 部\",\"iconCls\":\"icon-ok\"}" + str + "]");
        }
    }
}


ayun00
关注
专栏目录
jQuery无限层级下拉框
10-11
jQuery 无限层级 下拉框 多级下拉
jquery 无限级下拉菜单
03-07 136
本例子使用json数据,拼接ul和li来实现的效果图:1.准备json数据: View Code 1 var menuData = [ 2 {id:0,pid:-1,name:"订购产品",url:"",children:[ 3 {id:1,pid:0,name:"电脑配件",url:"http://www.ba...
jquery 实现层级下拉框联动效果 代码
dfsafsd32323的博客
11-27 146
<select name="fCareId" id="fCareId"> <option selected="selected" value="0">选择一级分类</option> </select> <select name="fCareItemId" id="fCareItemId"> ...
用jQuery制作最简单的无限级下拉菜单方法
weixin_30586085的博客
07-27 323
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js">&...
Jquery多级菜单插件
12-25
华丽丽的Jquery多级菜单插件，含Denmo
jquerycasecader一个jquery级联下拉组件
08-12
`jQuery Casecader` 是一个用于构建级联下拉菜单的插件，适用于那些需要多级选择或者联动效果的Web应用。在JavaScript开发中，特别是在前端交互设计中，这种组件非常常见，能够帮助用户通过下拉选项来筛选和导航数据...
基于ztree开发的下拉树控件ztree-select
05-10
【基于ztree开发的下拉树控件ztree-select】是一种高效的前端UI组件，它结合了ztree的核心特性和下拉菜单的功能，适用于构建具有层级结构的选中项。ztree是一个广泛使用的JavaScript树形插件，而ztree-select则是其...
树形下拉控件
02-18
在网页设计和开发中，"树形下拉控件"是一种常见的交互元素，它结合了树状结构和下拉列表的功能，为用户提供了一种高效、直观的方式来浏览和选择层次化的数据。这种控件通常用于展示有层级关系的数据，如目录结构、...
jQuery树形插件下拉列表选择框
06-24
在本案例中，该插件被用于创建一个下拉列表选择框，这使得用户可以在一个下拉菜单中选择树形结构中的某个节点，增加了交互性和用户体验。 "下拉列表选择框"是网页表单中常见的输入控件，它允许用户从预定义的选项中...
jquery下拉多级树选择插件（支持左右移动，以及模糊搜索功能）.zip
12-19
1. **多级树结构**：此插件能够展示一个多级的树状结构，用户可以选择不同层次的选项，这对于组织结构复杂或者层级关系明确的数据非常有用。例如，组织架构、产品分类或者地区划分等场景。 2. **左右移动功能**：这...
Jquery实现下拉框、多级联动
11-08
jquery实现的多级联动下拉框，由div标签加上span标签实现。
JS树状层级下拉菜单组件支持层级勾选
08-08
树状层级下拉菜单组件，支持层级勾选
基于jquery实现无限级树形菜单
11-27
本文实例为大家分享了基于jquery实现无限级树形菜单效果，具有一定的参考价值，具体内容如下 效果图： 实现代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无限级树形菜单</title> </head> [removed][removed] <style> ul.a{width:100%;cursor:pointer;padding:0 0px;color:white;} ul.a li{list-style-
下拉框层级绑定
weixin_30781107的博客
04-05 228
今天用到一个下拉框绑定，要有层级关系显示的，也很简单，就当第一篇博客！ 　　　/// <summary> /// 绑定下拉框 /// </summary> /// <param name="dt">绑定的数据源</param> /// <param name="parentId">...
通过递归实现下拉框的层次结构
落叶飞舞的专栏
03-11 2175
/// /// 递归添加数据 /// /// /// /// void add(DataTable table, int ParentID, int deep) { DataRow[] rowlist = table.Select("ParentID=" + ParentID); foreach (
Think PHP 5 将数据在下拉框中层级展示
Dragon
09-28 104
<select name="pid" class="form-control"> <option value="">------</option> {volist name="data" id="vo"} <option value="{$vo.power_id}">{:str_repeat(" ",$vo.level*2)}{$vo.power_name}</option> {/volist} </.
怎样制作有层级显示的下拉菜单_关于下拉菜单，你知道的和不知道的，都在这里了「超全收录」...
weixin_39612058的博客
01-26 918
各位朋友，你们好，今天和大家分享下拉菜单的制作，相关内容如下：一、下拉菜单的基础(三种制作方式)数据有效性制作下拉菜单表单控件之组合框制作下拉菜单ActiveX控件之组合框制作下拉菜单二、二级下拉菜单制作三、三级下拉菜单制作四、下拉菜单的特殊操作多列数据如何设置数据有效性如何制作关键字提醒的下拉菜单如何制作越选越少的下拉菜单五、Word中下拉菜单的制作下拉菜单的基础一、数据有效性制作下拉菜单依次找...
jQuery选择器之层级选择器
ljp1919的专栏
03-24 7615
背景：我们可以把文档中的所有的节点节点之间的关系，用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。 >（大于号）紧跟父子关系 如$("div > p")表示选择div下的直接层是p的节点。 +（加号） 紧跟兄弟关系 如$("div + p")表示选择div同层的左右相邻的p节点。 ~ （波浪线）任意距离兄弟关系 如$("div + p")
jq-json数据-无限极-层级
qq_1521514763的博客
12-27 646
样子： 数据： 后台返回的json数据， 用法：务必页面加载执行， $.getJSON("get_all",function(res){ var apend_id = 20; $("#treeMenu").append(showall(res,apend_id)); }) function showall(res,apend_
jQuery+CSS高级动态下拉菜单示例与ASP.NET集成
本文档主要介绍了如何使用jQuery和CSS结合，创建一个超性感（Sexy）的下拉菜单功能。Soh Tanaka的作品提供了一个基础模板，作者在此基础上进行了扩展，支持了多级下拉菜单的展示，使其在ASP.NET环境中具备动态生成的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值