UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

动态JSON树形菜单

所属分类：导航-文件树

 60851  399  查看评论 (16)
分享到微信朋友圈
X
动态JSON树形菜单 ie兼容7
 查看演示  立即下载

该插件修改本站以前的文件树插件，地址：http://www.jq22.com/jquery-info432( 这个插件提供了收缩功能,但是不能根据JSON生成模型 )上进行修改 

下载下来只需要解压即可运行 .

Json 格式类似这样( 完全可以根据自己的需要改 ): 

var json = [{
    "name": "中科慈航",
    "code": "ZKCH",
    "icon": "icon-th",
    "child": [{
        "name": "广州中科慈航",
        "icon": "icon-minus-sign",
        "code": "GZZKCH",
        "parentCode": "ZKCH",
        "child": [{
            "name": "广州中科慈航天河区分行",
            "code": "GZZKCHTQFH",
            "icon": "",
            "parentCode": "GZZKCH",
            "child": []
        }]
    },
    {
        "name": "北京中科慈航",
        "icon": "",
        "code": "BJZKCH",
        "parentCode": "ZKCH",
        "child": [{
            "name": "北京中科慈航中城区分行",
            "code": "BJZKCHZCFH",
            "icon": "",
            "parentCode": "BJZKCH",
            "child": []
        }]
    }]
},
{
    "name": "中科科技",
    "code": "ZKKJ",
    "icon": "icon-th",
    "child": [{
        "name": "广州中科科技",
        "code": "GZZKKJ",
        "icon": "icon-minus-sign",
        "parentCode": "ZKKJ",
        "child": [{
            "name": "广州天河中科科技",
            "code": "GZTHZKKJ",
            "icon": "",
            "parentCode": "GZZKKJ",
            "child": []
        }]
    }]
}];

JS:

function tree(data) {
    for (var i = 0; i < data.length; i++) {
        var data2 = data[i];
        if (data[i].icon == "icon-th") {
            $("#rootUL").append("<li data-name='" + data[i].code + "'><span><i class='" + data[i].icon + "'></i> " + data[i].name + "</span></li>");
        } else {
            var children = $("li[data-name='" + data[i].parentCode + "']").children("ul");
            if (children.length == 0) {
                $("li[data-name='" + data[i].parentCode + "']").append("<ul></ul>")
            }
            $("li[data-name='" + data[i].parentCode + "'] > ul").append("<li data-name='" + data[i].code + "'>" + "<span>" + "<i class='" + data[i].icon + "'></i> " + data[i].name + "</span>" + "</li>")
        }
        for (var j = 0; j < data[i].child.length; j++) {
            var child = data[i].child[j];
            var children = $("li[data-name='" + child.parentCode + "']").children("ul");
            if (children.length == 0) {
                $("li[data-name='" + child.parentCode + "']").append("<ul></ul>")
            }
            $("li[data-name='" + child.parentCode + "'] > ul").append("<li data-name='" + child.code + "'>" + "<span>" + "<i class='" + child.icon + "'></i> " + child.name + "</span>" + "</li>") var child2 = data[i].child[j].child;
            tree(child2)
        }
        tree(data[i]);
    }
}
tree(json)

js和json只有 code 和 parentCode 是最重要的......是根据这两个属性来完成递归, 上面的方法也没有优化只是简单的实现 . 

这是搜索功能 : 

<script type="text/javascript">$(function() {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', '关闭');
    $('.tree li.parent_li > span').on('click',
    function(e) {
      var children = $(this).parent('li.parent_li').find(' > ul > li');
      if (children.is(":visible")) {
        children.hide('fast');
        $(this).attr('title', '展开').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
      } else {
        children.show('fast');
        $(this).attr('title', '关闭').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
      }
      e.stopPropagation();
    });
  });</script>


相关插件-文件树
查看更多

纯javript实用多级目录树结构插件

 aimaraJS是一款非常实用的纯javript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点，可以制作多级树结构，每个节点上可以都带有右键上下文菜单，并且每个节点上都
  文件树
 60134  353

jQuery树形下拉菜单

 jQuery树形下拉菜单 支持Ajax异步加载jquery ajax tree menu
  文件树
 122862  503

jquery mobile 树插件

 jquery mobile 树形插件
  文件树
 60335  359

纯手写完成“移动端权限树”插件

 实现移动端权限树的全选，半选，以及不选的递归功能
  文件树
 65193  431

讨论这个项目（16）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    我们好像在哪儿见过 0
    2018/10/16 16:44:33
    如何默认收起
        后来丿Wold1
        2024/5/7 12:00:43
        "<li data-name='" + child.code + "' style='display: none'>"
    回复
    zhenbinlong 0
    2018/5/18 11:42:09
    请问搜索功能怎么搞，因为后台数据不好处理，只能查询所有，然后再在页面上搜索了， 回复
    Flyerison 0
    2018/1/3 22:19:05

    竖线出了个头，强迫症发作

        Flyerison1
        2018/1/3 22:25:23

        将.tree li:last-child::before改成height:25px就头就几乎没了

    回复
    hl540 0
    2017/7/3 19:23:29

    数据大了怎么办，还是动态加载好

    ，这个需要优化

    回复
    信念 0
    2017/7/1 15:40:11
    怎么默认全部节点都关闭
        后来丿Wold1
        2024/5/7 12:00:55
        "<li data-name='" + child.code + "' style='display: none'>"
    回复
    isl8 0
    2016/12/1 14:12:27
    四层就不好使了 ```
        ┮未知0
        2017/7/1 12:57:57

        尴尬症发作。。。哈哈。试了一下直接加child，的确是不好使。

        bloodyrabbit0
        2017/9/26 11:15:55

        试了下能用啊  改一下parentCode里的参数

        落幕的繁华0
        2017/11/19 13:09:35

        怎么改啊

        白衣?喵_0
        2018/3/1 13:16:17
        四层的你写出来没有哦  求参考
    回复
    小海豚悲催的死去 0
    2016/10/4 16:10:00
    function tree(data, dom) {
    for (var i = 0; i < data.length; i++) {
        var li = $("<li></li>");
        var span = $("<div> <i class='fa fa-minus-square'></i> 　" +
            data[i].name + "</div>");
        if (data[i].children.length == 0) {
            span = $("<div>" + data[i].name + "</div>");
        }
        dom.append(li);
        $(li).append(span);
        var ul = $("<ul></ul>");
        $(li).append(ul);
        tree(data[i].children, $(ul));
    }
};
        微风浮尘0
        2016/12/6 11:12:01
        dom是什么参数
        那片羊村由我来守护0
        2019/3/28 15:34:25
        同问
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复