将数组转换为 Ul-Li

Posted

技术标签:

【中文标题】将数组转换为 Ul-Li【英文标题】:Convert Array into Ul-Li 【发布时间】:2013-05-26 02:27:04 【问题描述】:

我有一个这样的数组

Array
(
    [0] => Array
        (
            [name] => Region
            [id] => 3
            [parent_id] => 2
            [children] => Array
                (
                    [0] => Array
                        (
                            [name] => Asia
                            [id] => 4
                            [parent_id] => 3
                            [children] => Array
                                (
                                    [0] => Array
                                        (
                                            [name] => Central Asia
                                            [id] => 6621
                                            [parent_id] => 4
                                            [children] => Array
                                                (
                                                    [0] => Array
                                                        (
                                                            [name] => Afghanistan
                                                            [id] => 5
                                                            [parent_id] => 6621
                                                            [children] => Array
                                                                (
                                                                    [0] => Array
                                                                        (
                                                                            [name] => Balkh
                                                                            [id] => 6
                                                                            [parent_id] => 5
                                                                            [children] => Array
                                                                                (
                                                                                    [0] => Array
                                                                                        (
                                                                                            [name] => Mazar-e-Sharif
                                                                                            [id] => 7
                                                                                            [parent_id] => 6
                                                                                        )

                                                                                )

                                                                        )

                                                                    [1] => Array
                                                                        (
                                                                            [name] => Kabol
                                                                            [id] => 10
                                                                            [parent_id] => 5
                                                                        )

                                                                    [2] => Array
                                                                        (
                                                                            [name] => Qandahar
                                                                            [id] => 12
                                                                            [parent_id] => 5
                                                                        )

                                                                )

                                                        )

                                                )

                                        )

                                    [1] => Array
                                        (
                                            [name] => Middle East
                                            [id] => 6625
                                            [parent_id] => 4
                                            [children] => Array
                                                (
                                                    [0] => Array
                                                        (
                                                            [name] => Armenia
                                                            [id] => 14
                                                            [parent_id] => 6625
                                                        )

                                                )

                                        )

                                )

                        )

                )

        )

)

现在我想将此数组转换为树格式中的ul-li

但它给了我奇怪的输出

例如Region我想要这样

<li id=3 parent_id=2 > Region </li>

这里我想使用idparent_id 作为属性 php函数是

    function olLiTree($tree)
    
        echo '<ul>';
        foreach($tree as $key => $item) 
            if (is_array($item)) 
                echo '<li>', $key;
                olLiTree($item);
                echo '</li>';
             else 
                echo '<li>', $item, '</li>'; 
            
        
        echo '</ul>';
    

上面函数的区域输出是这样的

<ul>
    <li>0
        <ul>
            <li>Region</li>
            <li>3</li>
            <li>2</li>
            <li>children
                <ul>

【问题讨论】:

你能指定你目前得到什么输出吗? 你能编辑你的问题并添加你的输出吗.. 您的 foreach 循环不正确。您必须将 $item['children'] 作为函数的属性以使其递归。 【参考方案1】:

试试这个:


/**
 * requires the following keys: id, parent_id, name;
 * may contain the following key: children
 *
 * @param  array   $array
 * @return string  ul-li html
 */
function arrayToHtml( array $array ) : string

    $html = '';
    if(count($array)) 
        $html .= '<ul>';
        foreach ( $array as $value ) 
            if (is_array($value)) 
                $idString = 'id="' . ($value['id'] ?? '0') .'"';
                $parentIdString = 'parent_id="' . ($value['parent_id'] ?? '0') . '"';
                $attributes = $idString . ' ' . $parentIdString;
                $value['children'] = $value['children'] ?? [];
                $value['name'] = $value['name'] ?? 'error';
                $html .= '<li ' . $attributes . '>' . $value['name'] . ':' . $this->arrayToHtml($value['children']) . '</li>';
            
        
        $html .= '</ul>';
    

    return $html;

【讨论】:

【参考方案2】:

我认为这个是正确的:

function olLiTree($tree) 
    echo "<ul>";
    foreach ($tree as $v) 
        echo "<li id='$v['id']' parent_id='$v['parent_id']'>$v['name']</li>";
        if ($v['children'])
            olLiTree($v['children']);
    
    echo "</ul>";

输出:

地区亚洲中部 亚洲阿富汗巴尔赫马扎里沙里夫卡博尔坎大哈 中东亚美尼亚

【讨论】:

【参考方案3】:

也许这是你寻求的递归。

function olLiTree( $tree ) 
    echo '<ul>';
    foreach ( $tree as $item ) 
        echo "<li id=\"$item[id]\" parent_id=\"$item[parent_id]\" > $item[name] </li>";
        if ( isset( $item['children'] ) ) 
            olLiTree( $item['children'] );
        
    
    echo '</ul>';

【讨论】:

以上是关于将数组转换为 Ul-Li的主要内容,如果未能解决你的问题,请参考以下文章

js字符串每个数组前面数字转换为多少个数组

将二维 JavaScript 数组转换为一维数组 [重复]

在javascript中如何将字符串转换为数组和数组转换为字符串

如何将带有数组的对象转换为数组

如何将char数组转换为CString

将多维数组转换为一维数组的算法