Question

我有以下结构：

var structure = {
  name: 'root',
  type: 'folder',
  children: [
    {
      name: 'aaa',
      type: 'leaf'
    },
    {
      name: 'bbb',
      type: 'leaf'
    },
    {
      name: 'folder2',
      type: 'folder',
      children: [...]
    } 
  ]
};

我用来创建类似文件系统的东西：

<table>
  <tbody>
    <tr class="folder">
      <td>folder</td>
    </tr>
    <tr class="children">
      <tr>
        <td>Child1</td>
      </tr>
      <tr>
        <td>Child2</td>
      </tr>
      <tr class="folder">
        <td>Folder 2</td>
      </tr>
      <tr class="children">
        <td>Child 3...</td>
      </tr>
    </tr>
</table>

所以一个文件夹包含两个tr - 一个有名字，一个有孩子。儿童可以是没有文件夹的叶子，也可以是文件夹本身。

这是代码转换结构为html：

var convert = function (data) {
    var elements = document.createDocumentFragment();
    for (var i in data) {
            var element = createTr();
            if (data[i].type == undefined) { // if is leaf
              element.appendChild('some leaf text node');
            } else if (data[i].type === "folder") {
                element.appendChild('some folder text node');
            }
            elements.appendChild(element);
            if (data[i].type === "folder") {
                var element = createTr(convert(data[i].children));
                elements.appendChild(element);
            }
        }
        return elements;
    };

当嵌套级别高于2时，如何在此函数中附加display: none？如何在此功能中获得嵌套级别？

我尝试在递归调用中传递变量，但每次有新文件夹时，变量都会递增，而不是新的嵌套级别。

我该怎么做？

编辑：这就是我试图解决这个问题的方法：

var convert = function (data, level) {
        level = level || 0;
        var elements = document.createDocumentFragment();
        for (var i in data) {
                var element = createTr();
                if (data[i].type == undefined) { // if is leaf
                  element.appendChild('some leaf text node');
                } else if (data[i].type === "folder") {
                    element.appendChild('some folder text node');
                }
                elements.appendChild(element);
                if (data[i].type === "folder") {
                    var element = createTr(convert(data[i].children, ++level));
                    elements.appendChild(element);
                }
            }
            return elements;
        };

Answer 1

你需要传递你的深度并在递归时增加它。

即你的功能应如下所示：

var convert = function (data, nestingLevel) {
    var elements = document.createDocumentFragment();
    for (var i in data) {
        var element = createTr();
        if (data[i].type == undefined) { // if is leaf
            element.appendChild('some leaf text node');
        } else if (data[i].type === "folder") {
            element.appendChild('some folder text node');
        }
        elements.appendChild(element);
        if (data[i].type === "folder") {
            var element = createTr(convert(data[i].children, nestingLevel + 1));
            elements.appendChild(element);
        }
    }
    return elements;
};

// and pass in 0 when you are initially calling this function...
convert(structure, 0);

隐藏在递归树

1 个答案: