如何在PHP中显示树视图？ [英] How to show tree view in php?

查看：111
本文介绍了如何在PHP中显示树视图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



我的PHP代码是： 

 <？php 
 //如果通过parentid，id 
 $ arr = array（
 array（'id'=> 100，'parentid'=> 0，'name'=>'first' ），
数组（'id'=> 101，'parentid'=> 100，'name'=>'second'），
 array（'id'=> 102' （'id'=> 103，'parentid'=> 100，'name'=>'fourth'） ，
数组（'id'=> 104，'parentid'=> 101，'name'=>'five'），
数组（'id'=> 105，'parentid '=> 102，'name'=>'six'），
 array（'id'=> 106，'pa​​rentid'=> 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）;回声< / pre>; 
？>

和我的html用户界面代码 

 < 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;位置：相对; 
过渡：全部0.5秒; 
 -webkit-transition：全部为0.5s; 
 -moz-transition：全部0.5s; 
} 
 .tree li {
 float：left; text-align：center; 
 list-style-type：none; 
职位：亲属; 
 padding：20px 5px 0 5px; 
过渡：全部0.5秒; 
 -webkit-transition：全部为0.5s; 
 -moz-transition：全部0.5s; 
} 
 .tree li ::之前，.tree li ::之后{
 content：''; 
位置：绝对; top：0;右：50％; 
 border-top：1px solid #ccc; 
宽度：50％; height：20px; 
} 
 .tree li :: after {
 right：auto;剩下：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无; 
} 
 .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：''; 
位置：绝对; top：0;剩下：50％; 
 border-left：1px solid #ccc; 
 width：0; height：20px; 
} 
 .tree li a {
 border：1px solid #ccc; 
 
 text-decoration：none; 
颜色：＃666; 
 font-family：arial，verdana，tahoma; 
 font-size：11px; 
 display：inline-block; 
 background：url（'people.png'）; 
 -webkit-border-radius：50％; 
 -moz-border-radius：5px; 
过渡：全部0.5秒; 
 -webkit-transition：全部为0.5s; 
 -moz-transition：全部0.5s; 
 width：40px; 
 height：40px; 
} 
 .tree li a：hover，.tree li a：hover + ul li a {
 background：＃c8e4f8;颜色：＃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中



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

解决方案

我们可以使用
$ b 

  class分支{
 public $ branches = []; 
 public $ name; 
 
 public function __construct（$ name）{
 $ this-> name = $ name; 
 
 
 public function to_html（）{
 $ str ='< li>< a href =＃>'。 $ this->名称。 < / A> \\\
; 
 if（！empty（$ this-> branches））{
 $ str。='< ul>'; 
 foreach（$ this->分支为$ branch）{
 $ str。= $ branch-> to_html（）; 
} 
 $ str。='< / ul>'; 
} 
 $ str。=< / li> \\\
; 
返回$ str; 
} 
} 
 
 $ tree = new Branch（first）; 
 $ tree-> branches [] = new Branch（second）; 
 $ tree-> branches [] = new Branch（third）; 
 $ tree-> branches [] =新分支（第四）; 
 $ 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将是

  • 首先
    • second
      • five

      • 8

      • 9


    • 第三个
      • 六个

      • 10


      • 第四
        • 七



      • I am developing Tree View in php, how to connect my php array code in html UI designs.

      My Php code is:

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

      and my html UI code

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

      and style sheet code

      * {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;
 }

      How to integrate my php code in html UI

      my desired result is like this image

      解决方案

      We can use a "real" tree in php code and that makes the things much easier.

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

      The output html will be

    • first
      • second
        • five
        • eight
        • nine
      • third
        • six
        • ten
      • fourth
        • seven

      • 这篇关于如何在PHP中显示树视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    • 查看全文
    相关文章
    PHP最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆