二叉树数组<ul>& lt; li>超文本标记语言 - Array of Binary tree to <ul> <li> HTML

Array of Binary tree to <ul> <li> HTML

我有二进制网络营销项目，我需要从数据库绘制成二叉树在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从示例数组数据

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

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

给定的级别是多余的。算法从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);

<?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);
?>