原生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" } ];

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wssxjd.html