关于树状结构 bootstrap-treeview的使用——前台拼接JSON

        一般的bootstrap-treeview数据都是后台传一个拼接好的json数据过来，前台显示，这里我采用后台传递普通数据，然后前台拼接的方式显示树状结构。

        本文主要将bootstrap-treeview数据源的拼接，如果对bootstrap-treeview的基本语法不了解的话建议先看bootstrap-treeview的文档：

        基于bootstrap的jQuery多级列表树插件_jQuery之家-自由分享jQuery、html5、css3的插件库

        本文没有采用递归、嵌套等方法循环后台数据，直接就是3个循环语句，所以只直接对3级分类的菜单有效，如果是4级等以上菜单，需要自己再添加一层循环。

目录

需要达成的目的：

使用技术：

数据结构要求：

引入bootstrap-treeview：

页面代码：

js代码：

css样式：

bootstrap-treeview的坑：

---

需要达成的目的：

        对3级的菜单等数据结构进行树状显示，结果如下：

        

使用技术：

        前台脚本：js/jq，没有使用vue等其他脚本

        获取后台数据：axios

        额外脚本、样式：bootstrap-treeview，这是主要的样式、脚本。

        

数据结构要求：

对于数据结构有特定要求：

        1）必须是3级结构，因为前台的拼接语句是写死的，所以超出3级就需要自己再添加一级循环语句，是3级结构就可以直接使用。

        2）每条数据都要有字段：name、id、pid

        id、pid必须有着逻辑关系：

                1级的id == 对应的2级的pid，2级的id == 对应的3d级的pid

        name需要放入bootstrap-treeview 的数据的固定属性 text

                树状结构的每一个节点都至少需要一个text属性，其余属性都是非必须的。

                如果 text 没搞懂，需要去看看上面的 bootstrap-treeview的文档。

        如果还有其余字段，可以在拼接时自行添加到属性中。

后台数据只有满足这2点，才可以直接使用方法，不然需要改造 if() 语句。

具体代码样式：

{id: 1, goodsTypeName: '1级菜单1', pid: 0}
{id: 2, goodsTypeName: '1级菜单2', pid: 0}

{id: 3, goodsTypeName: '2级菜单1', pid: 1}
{id: 4, goodsTypeName: '2级菜单2', pid: 2}
{id: 5, goodsTypeName: '2级菜单3', pid: 2}

{id: 6, goodsTypeName: '3级菜单1', pid: 3}
{id: 7, goodsTypeName: '3级菜单2', pid: 4}
{id: 8, goodsTypeName: '3级菜单3', pid: 4}

这个例子里