树形结构+html+原生,原生JS实现树状结构列表

树状结构列表，这个技术点之前有写过了，是基于vue讲解，但似乎都没有解决痛点，最基础的原生JS该怎么实现呢？

这篇文章会全面详细的介绍树状结构列表的实现，从数据处理成树状结构，到动态生成dom节点渲染页面。

确定原始数据结构

原始数据是需要按照下面这种结构来定义的，如果原始数据已经是被后端处理成树状结构，就可以省略这一步骤。

let data = [

{

"id": "1",

"name": "1",

"fatherId": "0",

},

{

"id": "2",

"name": "1-1",

"fatherId": "1"

},

{

"id": "3",

"name": "1-2",

"fatherId": "1"

},

{

"id": "4",

"name": "1-1-1",

"fatherId": "2"

},

{

"id": "5",

"name": "1-1-2",

"fatherId": "2"

},

{

"id": "6",

"name": "2",

"fatherId": "0"

},

{

"id": "7",

"name": "1-2-1",

"fatherId": "3"

}

];

使用map处理数据

const map = {};

const val = [];

data.forEach((item) => {

map[item.id] = item;

});

data.forEach((item) => {

const parent = map[item.fatherId];

if (parent) {

(parent.children || (parent.children = [])).push(item);

} else {

val.push(item);

}

});

把数组val打印出来看一下。

数组val

html结构

动态创建dom

将动态创建dom封装成一个方法，里面使用了递归。循环val数组调用这个方法，即可以实现动态创建dom。

const tree = document.getElementById("tree");

function createLi(data) {

const fid = `d${data.fatherId}`;

const div = document.getElementById(fid);

const treeItem = document.createElement("div");

treeItem.id = `d${data.id}`;

treeItem.className = "treeItem";

treeItem.innerHTML = data.name;

div.appendChild(treeItem);

if (data.children) {

data.children.forEach(d => {

createLi(d);

});

}

}

val.forEach(v => {

createLi(v);

})

css样式

.treeItem > .treeItem{

padding-left: 10px;

cursor: pointer;

}

.itemIcon {

display: inline-block;

width: 10px;

height: 10px;

border-radius: 50%;

background: red;

margin-right: 10px;

}

关注我吧

​