共计 1222 个字符,预计需要花费 4 分钟才能阅读完成。
背景
业务需要的功能,接着上一个话题 ( 扁平关系数据结构转换为深层关系数据结构),把功能做下去。
树结构
不好解释,简单说就是一个目录的样子,一级又一级的管理。
|-- 顶级 1
|--|-- 等级 1 次 1
|--|--|-- 等级 1 次 1 次 1
|--|--|-- 等级 1 次 1 次 2
|--|-- 等级 1 次 2
|--|-- 等级 1 次 3
|-- 顶级 2
然后在观察一下上图的目录结构,看起来很简单,每个列表都差不多。简单拆分为末端节点(没有子节点的节点)、标题节点(含有子节点的节点)。
末端节点的集合是一个普通的列表
<ul>
<li> 末端节点 1 </li>
<li> 末端节点 1 </li>
<li> 末端节点 1 </li>
</ul>
标题节点是列表中某个元素,但它有子列表。
刚刚那个目录就可以如下表示。
<ul>
<li>
<p> 顶级 1 </p>
<ul>
<li>
<p> 等级 1 次 1 </p>
<ul>
<li> 等级 1 次 1 次 1 </li>
<li> 等级 1 次 1 次 2 </li>
</ul>
</li>
<li> 等级 1 次 2 </li>
<li> 等级 1 次 3 </li>
</ul>
</li>
<li> 顶级 2 </li>
</ul>
数据转变为 HTML 代码
接着拿到上一篇的数据,其实数据结构和目录已经很相似了,一条数据中,有本身的内容,也包含了子列表的内容。搞起来。
var treeHTML = ''
$.each(_data, function(i, obj) {if(!!obj.sub.length) {// 有子节点} else {
// 没有子节点
treeHTML += '<li>' + obj.chnlName + '</li>'
}
})
treeHTML
表示最后树结构的 HTML 代码,但是,我们都知道遍历数据的时候,拼接代码,只能是目录中的 li
数据,所有在最后再把 treeHTML
用 ul
包裹一次。
以上的循环只是把没有子节点的转化为 HTML 代码了,有子节点的怎么办呢,好像也是一样的方式。于是,我们要 递归
咯。
// 获取树结构的 HTML
function getTreeHTML(arr) {
var _html = ''
$.each(_data, function(i, obj) {if(!!obj.sub.length) {_html += '<li><p>' + obj.chnlName + '</p>' + getTreeHTML(obj.sub) + '</li>'
} else {_html += '<li>' + obj.chnlName + '</li>'}
})
return '<ul>' + _html + '</ul>'
}
var treeHTML = getTreeHTML(_data)
每次 getTreeHTML
构建最简单的末端节点,非末端节点,通过自己调用自己的方式构建。
因为目录结构相似,所有复用性很高,如果要弄出其他样子,可能还需要其他变量支撑。
难点的话,就是把目录写出来,然后使用 递归
把数据遍历到最末端。
递归(JavaScript) – MSDN – Microsoft
现在已经把树的样子做出来了,接下来就是把单选、多选、全选等功能倒腾出来。
正文完