php - 如何在 php 中显示 TreeView ？

Question

我正在用 php 开发 TreeView ，如何在 html UI 设计中连接我的 php 数组代码。

我的 Php 代码是:

<?php
 //if order by parentid, id
$arr = array(
array('id'=>100, 'parentid'=>0, 'name'=>'first'),
array('id'=>101, 'parentid'=>100, 'name'=>'second'),
array('id'=>102, 'parentid'=>100, 'name'=>'third'),
array('id'=>103, 'parentid'=>100, 'name'=>'fourth'),
array('id'=>104, 'parentid'=>101, 'name'=>'five'),
array('id'=>105, 'parentid'=>102, 'name'=>'six'),
array('id'=>106, 'parentid'=>103, 'name'=>'seven'),
array('id'=>107, 'parentid'=>101, 'name'=>'eight'),
array('id'=>108, 'parentid'=>101, 'name'=>'nine'),
array('id'=>109, 'parentid'=>102, 'name'=>'ten'),
);
$arr_tree = array();
$arr_tmp = array();
foreach ($arr as $item) {
$parentid = $item['parentid'];
$id = $item['id'];

if ($parentid  == 0)
{
    $arr_tree[$id] = $item;
    $arr_tmp[$id] = &$arr_tree[$id];
}
else 
{
    if (!empty($arr_tmp[$parentid])) 
    {
        $arr_tmp[$parentid]['children'][$id] = $item;
        $arr_tmp[$id] = &$arr_tmp[$parentid]['children'][$id];
    }
   }
 }
unset($arr_tmp);
echo '<pre>'; print_r($arr_tree); echo "</pre>";
?>

和我的 html UI 代码

<div class="tree">  
  <ul>
    <li>
      <a href="#"></a>
      <ul>
        <li><a href="#"></a>
            <ul>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
            </ul>
        </li>
        <li><a href="#"></a>
            <ul>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
            </ul>
        </li>
        <li><a href="#"></a>
            <ul>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
            </ul>
        </li>
      </ul>
    </li>       

  </ul>
 </div>

和样式表代码

* {margin: 0; padding: 0;}
.tree ul {
 padding-top: 20px; position: relative;  
 transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
 float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;  
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
 }
 .tree li::before, .tree li::after{
 content: '';
 position: absolute; top: 0; right: 50%;
 border-top: 1px solid #ccc;
 width: 50%; height: 20px;
 }
 .tree li::after{
   right: auto; left: 50%;
  border-left: 1px solid #ccc;
 }
.tree li:only-child::after, .tree li:only-child::before {
 display: none;
 }
.tree li:only-child{ padding-top: 0;}
.tree li:first-child::before, .tree li:last-child::after{
 border: 0 none;
 }
.tree li:last-child::before{
 border-right: 1px solid #ccc;
 border-radius: 0 5px 0 0;
 -webkit-border-radius: 0 5px 0 0;
 -moz-border-radius: 0 5px 0 0;
 }
.tree li:first-child::after{
 border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
.tree ul ul::before{
 content: '';
 position: absolute; top: 0; left: 50%;
 border-left: 1px solid #ccc;
 width: 0; height: 20px;
 }
 .tree li a{
  border: 1px solid #ccc;

 text-decoration: none;
 color: #666;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 display: inline-block;
 background: url('people.png');
 -webkit-border-radius: 50%;
  -moz-border-radius: 5px;
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 width: 40px;
 height: 40px;
 }
 .tree li a:hover, .tree li a:hover+ul li a {
 background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
 }
 .tree li a:hover+ul li::after, 
 .tree li a:hover+ul li::before, 
 .tree li a:hover+ul::before, 
 .tree li a:hover+ul ul::before{
 border-color:  #94a0b4;
 }

如何将我的 php 代码集成到 html UI 中

我想要的结果是像这张图片

Answer 1

我们可以在 php 代码中使用“真正的”树，这会使事情变得容易得多。

class Branch {
  public $branches = [];
  public $name;

  public function __construct($name) {
    $this->name = $name;
  }

  public function to_html() {
    $str = '<li><a href="#">' . $this->name . "</a>\n";
    if (!empty($this->branches)) {
      $str .= '<ul>';
      foreach ($this->branches as $branch) {
        $str .= $branch->to_html();
      }
      $str .= '</ul>';
    }
    $str .= "</li>\n";
    return $str;
  }
}

$tree = new Branch("first");
$tree->branches[] = new Branch("second");
$tree->branches[] = new Branch("third");
$tree->branches[] = new Branch("fourth");
$tree->branches[0]->branches[] = new Branch("five");
$tree->branches[0]->branches[] = new Branch("eight");
$tree->branches[0]->branches[] = new Branch("nine");
$tree->branches[1]->branches[] = new Branch("six");
$tree->branches[1]->branches[] = new Branch("ten");
$tree->branches[2]->branches[] = new Branch("seven");

$html = $tree->to_html();

输出的 html 将是

首先

• 第二个
  • 五个
  • 八
  • 九个
• 第三名
  • 六个
  • 十
• 第四个
  • 七