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

动态JSON树形菜单

所属分类：导航-文件树

 64184  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>


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

jQuery目录树插件jtree

 jQuery目录树、文件树插件jtree，带搜索功能
  文件树
 78941  443

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

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

树控件

 非常简单的树控件，代码中注释说明很详细，方便大家修改。
  文件树
 51442  334

js动态树插件DynamicTree

 简单好用的 tree ，纯 js ，可编辑 Tree，并能导出为 html sql php
  文件树
 43541  328

讨论这个项目（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
        同问
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复