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

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

51739 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

jQuery树形下拉菜单

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

文件树

123756 503

js动态树插件DynamicTree

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

文件树

42769 328

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

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

文件树

65981 431

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

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

文件树

38493 338

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