树形结构+html+原生,构建树结构的HTML

背景

业务需要的功能，接着上一个话题(扁平关系数据结构转换为深层关系数据结构)，把功能做下去。

树结构

不好解释，简单说就是一个目录的样子，一级又一级的管理。

|-- 顶级1

|--|-- 等级1次1

|--|--|-- 等级1次1次1

|--|--|-- 等级1次1次2

|--|-- 等级1次2

|--|-- 等级1次3

|-- 顶级2

然后在观察一下上图的目录结构，看起来很简单，每个列表都差不多。简单拆分为末端节点(没有子节点的节点)、标题节点(含有子节点的节点)。

末端节点的集合是一个普通的列表

• 末端节点1
• 末端节点1
• 末端节点1

标题节点是列表中某个元素，但它有子列表。

刚刚那个目录就可以如下表示。

• 顶级1

  • 等级1次1

    • 等级1次1次1
    • 等级1次1次2
  • 等级1次2
  • 等级1次3
• 顶级2

数据转变为HTML代码

接着拿到上一篇的数据，其实数据结构和目录已经很相似了，一条数据中，有本身的内容，也包含了子列表的内容。搞起来。

var treeHTML = ''

$.each(_data, function(i, obj) {

if(!!obj.sub.length) {

// 有子节点

} else {

// 没有子节点

treeHTML += '

' + obj.chnlName + ''

}

})

treeHTML 表示最后树结构的HTML代码，但是，我们都知道遍历数据的时候，拼接代码，只能是目录中的 li 数据，所有在最后再把 treeHTML 用 ul 包裹一次。

以上的循环只是把没有子节点的转化为HTML代码了，有子节点的怎么办呢，好像也是一样的方式。于是，我们要 递归 咯。

// 获取树结构的HTML

function getTreeHTML(arr) {

var _html = ''

$.each(_data, function(i, obj) {

if(!!obj.sub.length) {

_html += '

' + obj.chnlName + '

' + getTreeHTML(obj.sub) + ''

} else {

_html += '

' + obj.chnlName + ''

}

})

return '

• ' + _html + '

'

}

var treeHTML = getTreeHTML(_data)

每次 getTreeHTML 构建最简单的末端节点，非末端节点，通过自己调用自己的方式构建。

因为目录结构相似，所有复用性很高，如果要弄出其他样子，可能还需要其他变量支撑。

难点的话，就是把目录写出来，然后使用 递归 把数据遍历到最末端。

现在已经把树的样子做出来了，接下来就是把单选、多选、全选等功能倒腾出来。