递归动态创建了折叠菜单,每个层级的缩进样式应该怎么添加处理？

Question

数据

{
    "code": 100,
    "content": {
        "rows": [
            { "id": "1", "name": "父节点1", "url": "www", "pid": "0" },
            { "id": "4", "name": "父节点11", "url": "", "pid": "1" },
            { "id": "13", "name": "父节点111", "url": "", "pid": "4" },
            { "id": "14", "name": "父节点112", "url": "", "pid": "4" },
            { "id": "5", "name": "父节点12", "url": "", "pid": "1" },
            { "id": "6", "name": "父节点13", "url": "", "pid": "1" },
            { "id": "2", "name": "父节点4", "url": "", "pid": "0" },
            { "id": "7", "name": "父节点41", "url": "", "pid": "2" },
            { "id": "8", "name": "父节点42", "url": "", "pid": "2" },
            { "id": "9", "name": "父节点43", "url": "", "pid": "2" },
            { "id": "3", "name": "父节点5", "url": "", "pid": "0" },
            { "id": "10", "name": "父节点51", "url": "", "pid": "3" },
            { "id": "11", "name": "父节点52", "url": "", "pid": "3" },
            { "id": "12", "name": "父节点53", "url": "", "pid": "3" }
        ]
    },
    "message": "成功"
}

//主方法，运用递归实现
var createTree = function(jsons, pid) {
    if (jsons != null) {
        var ul = '<ul class="">';
        for (var i = 0; i < jsons.length; i++) {
            if (jsons[i].pid == pid) {
                ul += '<li>' + jsons[i].name + "</li>";
                ul += createTree(jsons, jsons[i].id);
            }
        }
        ul += "</ul>";
    }
    return ul;
}

//调用
 $.ajax({
    url: '../../json/treeListView.json',
    dataType: 'json',
    type: 'get',
    async: false,
    success: function(data) {
        if (data.code == 100) {
            var treeData = data.content.rows;
            var ul = createTree(treeData, 0);
            $("#continer").append(ul);
        }
    }
});

目前的页面效果

想要实现的效果

如题：每个level的父级都要比它的上一级向右缩进20px

Answer 1

先看演示：https://jsfiddle.net/gyb5yh3v/

数据就用的题主给的那个，赋给变量名 data

下面用 es6 语法写了一个 TreeBuilder

• 构造的时候传入 data，调用 makeTree 把数据变成树结构(使用 children 保存子节点)

• 调用 build 构造 DOM 树

class TreeBuilder {
    constructor(data) {
        this.makeTree(data.content.rows);
    }

    makeTree(list) {
        const root = {};

        // 建立 ID 到节点数据的映射表
        const map = list.reduce((nodes, node) => {
            nodes[node.id] = node;
            return nodes;
        }, {});

        // 通过映射表查找 pid，找到父节点，建立树结构
        list.forEach(node => {
            const parent = map[node.pid] || root;
            const children = parent.children = parent.children || [];
            children.push(node);
        });

        this.tree = root;
    }

    build() {
        // buildChildren 和 buildNode 是双函数的递归实现
        return this.buildChildren(this.tree);
    }

    /**
     * 处理子节点
     */
    buildChildren(parent) {
        const $ul = $("<ul>");
        parent.children
            .map(node => this.buildNode(node))
            .forEach(node => $ul.append(node));
        return $ul;
    }

    /**
     * 处理节点，若有子节点则调用 buildChildren 生成子树
     */
    buildNode(node) {
        const $li = $("<li>").append(
            $("<a>").text(node.name || "")
                .attr("href", node.url || "#"));
        if (node.children && node.children.length) {
            $li.append(this.buildChildren(node));
        }
        return $li;
    }
}

最后生成 TreeBuildre 的实例，并调用 build 生成树的根 <ul>，加入到容器(假设其 ID 是 tree)中去

const treeBuilder = new TreeBuilder(data);
treeBuilder.build()
    .appendTo($("#tree"));

这里有几点要提醒一下

• 生成 DOM 树的时候，不建议使用字符串拼接。可以使用 jQuery 的方法来构建 DOM 树 (自己处理字符串拼接需要考虑特殊字符)

• 建议将数据处理和 UI 处理分开进行。如果没有性能问题，最好不要一边处理数据一边处理 UI (需要性能优化的情况除外)

• 建议使用 zTree，如果要做成菜单可以考虑修改(overwrite)其样式表来实现自己需要的样式。

Answer 2

你的数据中的pid代表什么内容？ 如果是代表等级的话，为什么 父节点5x的pid是3？？

在线预览： https://jsfiddle.net/5cf4tf2z/

<div id="listBox"></div>

// list 是我从你的结果中拿出来的
    var list = [
        { "id": "1", "name": "父节点1", "url": "www", "pid": "0" },
        { "id": "4", "name": "父节点11", "url": "", "pid": "1" },
        { "id": "13", "name": "父节点111", "url": "", "pid": "4" },
        { "id": "14", "name": "父节点112", "url": "", "pid": "4" },
        { "id": "5", "name": "父节点12", "url": "", "pid": "1" },
        { "id": "6", "name": "父节点13", "url": "", "pid": "1" },
        { "id": "2", "name": "父节点4", "url": "", "pid": "0" },
        { "id": "7", "name": "父节点41", "url": "", "pid": "2" },
        { "id": "8", "name": "父节点42", "url": "", "pid": "2" },
        { "id": "9", "name": "父节点43", "url": "", "pid": "2" },
        { "id": "3", "name": "父节点5", "url": "", "pid": "0" },
        { "id": "10", "name": "父节点51", "url": "", "pid": "3" },
        { "id": "11", "name": "父节点52", "url": "", "pid": "3" },
        { "id": "12", "name": "父节点53", "url": "", "pid": "3" }
    ];
    var htm = '';
    var box = document.getElementById("listBox");
    list.forEach(function (item, index) {
        var p = document.createElement('p');
        p.innerHTML = item.name;
        p.style.marginLeft = parseInt(item.pid) * 20 + 'px';
        box.appendChild(p);
    });

Answer 3

代码没有问题，CSS 样式应该是被抹平了，试一下这个：

ul {
  list-style: disc;
  padding-left: 40px;
}
ul ul {
  list-style: circle;
}
ul ul ul {
  list-style: square;
}
li {
  display: list-item;
}

另外，不建议你使用 ==，我改一下：

var createTree = function(jsons, pid) {
    if (jsons != null) {
        var ul = '<ul class="">';
        for (var i = 0; i < jsons.length; i++) {
            if (+jsons[i].pid === pid) {
                ul += '<li>' + jsons[i].name + "</li>";
                ul += createTree(jsons, +jsons[i].id);
            }
        }
        ul += "</ul>";
    }
    return ul;
}