二进制树的数组 HTML

Question

我有二进制网络营销项目，我需要从数据库绘制到html中的二叉树。数据已经存储为php或jquery中的数组。

+----+----------+------+------+
| id | parentID | Level|  pos |
+----+----------+------+------+
|  1 |     NULL |   0  |      |
|  2 |        1 |   1  |   L  |  
|  3 |        1 |   1  |   R  |
|  4 |        2 |   2  |   L  |
|  5 |        2 |   2  |   R  |
|  6 |        3 |   2  |   L  |
|  7 |        3 |   2  |   R  |
+----+----------+------+------+

我想在下面画出UL LI

<ul class='tree-root'>
  <li>
    <a href="#">Parent</a>
    <ul class='tree-level1'>
      <li>
        <a href="#">Child</a>
        <ul class='tree-level2'>
          <li>
            <a href="#">Grand Child</a>
            <ul class='tree-level3'>
              <li>
                <a href="#">Grand Child</a>
              </li>
              <li>
                <a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Grand Child</a>
            <ul class='tree-level3'>
              <li>
                <a href="#">Grand Child</a>
              </li>
              <li>
                <a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Child</a>
        <ul class='tree-level2'>
          <li>
            <a href="#">Grand Child</a>
            <ul class='tree-level3'>
              <li>
                <a href="#">Grand Child</a>
              </li>
              <li>
                <a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Grand Child</a>
            <ul class='tree-level3'>
              <li>
                <a href="#">Grand Child</a>
              </li>
              <li>
                <a href="#">Grand Child</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
    
</ul>

有人可以用jquery或php语法帮助我从示例数组数据中生成ul li

我的代码仍然很简单。我不知道该写些什么。注意：在级别3（我的ex数组只有2级）数据可以是随机的，因为它以递归方式从数据库中读取，甚至是按级别字段排序的数组。

foreach($arrTree as $arr){
 //help me here
}

Answer 1

给定的级别是多余的。算法从parent = null开始并迭代给定的数据。首先，它查找给定的父级和空字符串pos。之后，它寻找L和R。如果找到，则生成输出，并将给定的id用作新搜索的父级。

var data = [
    { id: 1, parent: null, pos: '', content: 'parent' },
    { id: 2, parent: 1, pos: 'L', content: 'child' },
    { id: 3, parent: 1, pos: 'R', content: 'child' },
    { id: 4, parent: 2, pos: 'L', content: 'grand child' },
    { id: 5, parent: 2, pos: 'R', content: 'grand child' },
    { id: 6, parent: 3, pos: 'L', content: 'grand child' },
    { id: 7, parent: 3, pos: 'R', content: 'grand child' }
];

function tree(parent, level) {

    function findRow(p, pos) {
        var id;
        data.some(function (r, i) {
            return r.parent === p && r.pos === pos ? (id = i, true) : false;
        });
        return id;
    }

    function procRow(r) {
        document.write('<li>');
        document.write(data[r].content + ' ' + data[r].id + ' ' + data[r].pos + ' ' + level);
        tree(data[r].id, level + 1);
        document.write('</li>');
    }

    document.write('<ul>');
    ['', 'L', 'R'].forEach(function (l) {
        var row = findRow(parent, l);
        data[row] && procRow(row);
    });
    document.write('</ul>');
}

tree(null, 0);

Answer 2

<?PHP

function doOutputList($TreeArray, $deep=0)
{
    $padding = str_repeat('  ', $deep*3);

    echo $padding . "<ul>\n";
    foreach($TreeArray as $arr)
    {
        echo $padding . "  <li>\n";
        if(is_array($arr)) 
        {
                doOutputList($arr, $deep+1);
        }
        else
        {
                echo $padding .'    '. $arr;
        }
        echo $padding . "  </li>\n";
    }
    echo $padding . "</ul>\n";
}

doOutputList($array);

?>