站点图标

JS生成列表树

2019-04-19折腾记录JavaScript / 目录树 / 递归
本文最后更新于 410 天前,文中所描述的信息可能已发生改变

上一篇文章我们使用 PHP 的构建简单的目录树,这次由于一个项目的需要(构建标题大纲),需要在前端使用 JS 构建 ul li 的多层次列表,其实就是类似于 ZUI 的树形菜单啦( ̄ ▽  ̄)”

实现原理

首先需要准备一个对象数组,数组中的对象拥有leveltitle(可以自行命名,由于博主是生成标题的索引所以就使用 title 命名)

另外,该数组需要按一定的顺序进行排序,否则就需要自行设置索引,排序的规则是子级必须紧跟在父级后,例如


_33
// # 1
_33
// ## 2
_33
// ## 3
_33
// ### 4
_33
// ### 5
_33
// # 6
_33
_33
var tocContent = [
_33
{
_33
level: 1,
_33
title: "1"
_33
},
_33
{
_33
level: 2,
_33
title: "2"
_33
},
_33
{
_33
level: 2,
_33
title: "3"
_33
},
_33
{
_33
level: 3,
_33
title: "4"
_33
},
_33
{
_33
level: 3,
_33
title: "5"
_33
},
_33
{
_33
level: 1,
_33
title: "6"
_33
}
_33
];

有了目录的对象数组,我们就可以通过递归或者栈来构建列表树了

实现代码

构建 HTML


_40
var tocContent = [];
_40
function getTocHtml() {
_40
var html = getTocHtmlTree(0, "");
_40
window.$toc = html;
_40
return html;
_40
}
_40
function getTocHtmlTree(index, str) {
_40
if (index >= tocContent.length) return str;
_40
if (index == 0) {
_40
str += "";
_40
} else if (tocContent[index].level > tocContent[index - 1].level) {
_40
for (
_40
let i = tocContent[index - 1].level;
_40
i < tocContent[index].level;
_40
i++
_40
) {
_40
str += "<ul>";
_40
}
_40
} else if (tocContent[index].level < tocContent[index - 1].level) {
_40
for (
_40
let i = tocContent[index].level;
_40
i < tocContent[index - 1].level;
_40
i++
_40
) {
_40
str += "</ul></li>";
_40
}
_40
} else {
_40
str += "</li>";
_40
}
_40
str +=
_40
'<li><img class="toc-img" src="/static/svg/disc.svg"><a href="#' +
_40
tocContent[index].title
_40
.toLowerCase()
_40
.replace(/ /g, "-")
_40
.replace(/[^\u4e00-\u9fa5a-zA-Z0-9-]/g, "") +
_40
'">' +
_40
tocContent[index].title +
_40
"</a>";
_40
return getTocHtmlTree(index + 1, str);
_40
}

通过调用getTocHtml()就可以获得目录的 HTML,生成后的效果如下

从代码中可以看到在 li 标签中还有img标签和带锚点的a标签,a 标签是为了跳转到指定位置而设置的,可以按不同的需求进行调整,img 标签是为了点击时显示和隐藏子级列表而设置的

为目录添加 toggle 功能

废话不多说,先上代码


_16
function initTocTree() {
_16
var items = document.querySelectorAll('#toc .toc-img ~ ul') for (let i = 0; i < items.length; i++) {
_16
items[i].parentNode.children[0].setAttribute('src', '/static/svg/minus-square.svg');
_16
items[i].parentNode.children[0].setAttribute('onclick', 'toggleToc(this)');
_16
}
_16
}
_16
function toggleToc(ele) {
_16
var display = ele.nextElementSibling.nextElementSibling.style.display
_16
if (display === '' || display === 'block') {
_16
ele.nextElementSibling.nextElementSibling.style.display = 'none';
_16
ele.setAttribute('src', '/static/svg/plus-square.svg');
_16
} else {
_16
ele.nextElementSibling.nextElementSibling.style.display = 'block';
_16
ele.setAttribute('src', '/static/svg/minus-square.svg');
_16
}
_16
}

initTocTree()是用来初始化列表树的,该函数会修改有子列表点的父级列表图片,并为其添加 onclick 事件,toggleToc()是在 img 标签被点击的时候展开/隐藏子级列表的,同时修改其 img 图像,便于用户判断子列表是否已经展开,具体效果如下

虽然有上篇文章的参考我还是想了很久,写出来的代码也很渣,看来还需不断的学习啊>﹏<

JS生成列表树

https://blog.ixk.me/post/js-generate-list-tree
  • 许可协议

    BY-NC-SA

  • 发布于

    2019-04-19

  • 本文作者

    Otstar Lin

转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!

XK-Editor - 一个支持富文本和Markdown的编辑器Laravel生成目录树