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

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

51169 344 查看评论 (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

轻量级的原生js权限树插件(原创)

YnTree是一款专门用于权限管理的权限树插件，它依靠数据来驱动，不依赖于任何别的插件并且支持ajax。

文件树

49285 363

带有复选框可折叠的树形结构

该插件是我改良的layer的树形插件，在原始的layer插件中的树形结构是没有复选框的，经我修改后可用以拿来做权限系统的权限选择

文件树

103367 524

jQuery文件树插件SimpleTree.js

jQuery文件树插件SimpleTree.js，代码少使用方便。

文件树

54129 333

bootstrap风格的zTree插件

使用bootstrap的同学，在使用zTree插件时，发现风格很难看，和bootstrap不搭调，现在你们的福利来了，bootstrap风格的zTree插件发布了！

文件树

164293 726

讨论这个项目（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;
}