最新消息:站点添加了一些不太友好的内容,请见谅...

构建树结构的HTML

若思若想 onlyling 772浏览 0评论

背景

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

图

树结构

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

|-- 顶级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 数据,所有在最后再把 treeHTMLul 包裹一次。

以上的循环只是把没有子节点的转化为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

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

转载请注明:OnlyLing-WEB前端开发者 » 构建树结构的HTML

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址