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

＆＃13;

<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>

＆＃13;

有人可以用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

UIScrollView

二进制树的数组到<ul> <li> HTML

2 个答案: