轻量级、常用的树状菜单结合自定义滚动条（原创）

所属分类：导航,UI-文件树,滚动

50350 343 查看评论 (10)

分享到微信朋友圈

查看演示立即下载

插件描述：本人在项目中实际应用总结出来的，非常实用的树状菜单，结合自定义美化滚动条，树状菜单项不换行，并根据内容的多少，适时出现滚动条。

更新时间：2018/1/10 下午3:09:40

更新说明：优化默认打开当前选中的菜单，在节点上添加class“ontree”,添加了以下代码

$(".ontree").each(function(){
    $(this).parents("ul").show();
    $(this).parents("ul").siblings().addClass("open_menu").removeClass("close_menu");
});

使用方法

第一步：按照demo的结构搭建html，具体应用时，自定义树状菜单在页面中的位置可调整

<div class="centent"></div>

的css；

第二步：引入tree.css和treescroll.min.js；

第三步：初始化菜单时按需要在相应的位置设置打开或者关闭，打开使用“open_menu”，关闭使用“close_menu”;

jquery时区选择插件timezone-picker

js动态树插件DynamicTree

jQuery树形下拉菜单

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

文件树

121370 501

vue树形插件

vue的树形插件，支持增加节点，修改节点，删除节点 . 简单实用。

文件树

51625 336

可无限添加子级的数据树（原创）

可折叠的数据树，可以选择有选择框或无选择框

文件树

36622 338

jQuery表格树插件TreeGrid

网上找的源码经过自己修改亲测可以兼容ie5及以上版本应该可以兼容jquery1.3以上的所有版本.由于是开源的如果兼容性有问题可以直接修改里面的代码.

文件树

134074 405

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

始终难求 0

2019/4/28 18:35:00

强少1

2019/8/21 17:35:03

接口返回的数据格式可参照：1 {…}
name 城中区
count 6
id 1
sort 0
childrenList […]
0 {…}
name 城中街道
count 2
id 2
sort 0
childrenList []
1 {…}
2 {…}
3 {…}
4 {…}
5 {…}
以下是动态构造树状的方法：

function buildMenu(rdata) {
    var temp = '';
    $(rdata).each(function() {
        if (this.childrenList.length != 0) {
            temp += '<li><div class="close_menu"><span></span><a title="' + this.name + '"  id="' + this.id + '">' + this.name + '</a></div>';
            temp += '<ul  parentId="' + this.id + '"  parentName="' + this.name + '" style="display:none;">';
            temp += buildMenu(this.childrenList);
            temp += '</ul></li>';
        } else {
            temp += '<li><a title="' + this.name + '"  id="' + this.id + '">' + this.name + '</a></li>'
        }
    });
    return temp;
}