树形结构+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 = ''
html ul标签$.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 构建最简单的末端节点，⾮末端节点，通过⾃⼰调⽤⾃⼰的⽅式构建。因为⽬录结构相似，所有复⽤性很⾼，如果要弄出其他样⼦，可能还需要其他变量⽀撑。
难点的话，就是把⽬录写出来，然后使⽤ 递归 把数据遍历到最末端。
现在已经把树的样⼦做出来了，接下来就是把单选、多选、全选等功能倒腾出来。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。