-1

I am trying to build an HTML tree in this format below, it can go as many levels deep as needed but it should follow this format.

What I have as a data source is a PHP array that is built from an API call in Magento.

My PHP Array looks something like this...

Array
(
    [category_id] => 1
    [parent_id] => 0
    [name] => Root Catalog
    [is_active] => 
    [position] => 0
    [level] => 0
    [children] => Array
        (
            [0] => Array
                (
                    [category_id] => 2
                    [parent_id] => 1
                    [name] => Default Category
                    [is_active] => 1
                    [position] => 1
                    [level] => 1
                    [children] => Array
                        (
                            [0] => Array
                                (
                                    [category_id] => 263
                                    [parent_id] => 2
                                    [name] => Texas Roadhouse
                                    [is_active] => 1
                                    [position] => 1
                                    [level] => 2
                                    [children] => Array
                                        (
                                        )

                                )

                            [1] => Array
                                (
                                    [category_id] => 265
                                    [parent_id] => 2
                                    [name] => Bubba's
                                    [is_active] => 1
                                    [position] => 2
                                    [level] => 2
                                    [children] => Array
                                        (
                                        )

                                )

                            [2] => Array
                                (
                                    [category_id] => 3
                                    [parent_id] => 2
                                    [name] => Neon Signs
                                    [is_active] => 1
                                    [position] => 3
                                    [level] => 2
                                    [children] => Array
                                        (
                                            [0] => Array
                                                (
                                                    [category_id] => 12
                                                    [parent_id] => 3
                                                    [name] => Custom Neon Signs
                                                    [is_active] => 1
                                                    [position] => 1
                                                    [level] => 3
                                                    [children] => Array
                                                        (
                                                            [0] => Array
                                                                (
                                                                    [category_id] => 257
                                                                    [parent_id] => 12
                                                                    [name] => Animals Custom Neon Signs
                                                                    [is_active] => 0
                                                                    [position] => 1
                                                                    [level] => 4
                                                                    [children] => Array
                                                                        (
                                                                        )

                                                                )

                                                            [1] => Array
                                                                (
                                                                    [category_id] => 258
                                                                    [parent_id] => 12
                                                                    [name] => Bar Beer Cocktails Custom Neon Signs
                                                                    [is_active] => 0
                                                                    [position] => 2
                                                                    [level] => 4
                                                                    [children] => Array
                                                                        (
                                                                        )

                                                                )

The HTML output that I need to convert my PHP array into should be in this format...

<div id="tree">
    <ul>
        <li><input type="checkbox"><span>Node 1</span>
            <ul>
                <li><input type="checkbox"><span>Node 1.1</span>
                    <ul>
                        <li><input type="checkbox"><span>Node 1.1.1</span>
                    </ul>
            </ul>
            <ul>
                <li><input type="checkbox"><span>Node 1.2</span>
                    <ul>
                        <li><input type="checkbox"><span>Node 1.2.1</span>
                        <li><input type="checkbox"><span>Node 1.2.2</span>
                        <li><input type="checkbox"><span>Node 1.2.3</span>
                            <ul>
                                <li><input type="checkbox"><span>Node 1.2.3.1</span>
                                <li><input type="checkbox"><span>Node 1.2.3.2</span>
                            </ul>
                        <li><input type="checkbox"><span>Node 1.2.4</span>
                        <li><input type="checkbox"><span>Node 1.2.5</span>
                        <li><input type="checkbox"><span>Node 1.2.6</span>
                    </ul>
            </ul>
        <li><input type="checkbox"><span>Node 2</span>
            <ul>
                <li><input type="checkbox"><span>Node 2.1</span>
                    <ul>
                        <li><input type="checkbox"><span>Node 2.1.1</span>
                    </ul>
                <li><input type="checkbox"><span>Node 2.2</span>
                    <ul>
                        <li><input type="checkbox"><span>Node 2.2.1</span>
                        <li><input type="checkbox"><span>Node 2.2.2</span>
                        <li><input type="checkbox"><span>Node 2.2.3</span>
                            <ul>
                                <li><input type="checkbox"><span>Node 2.2.3.1</span>
                                <li><input type="checkbox"><span>Node 2.2.3.2</span>
                            </ul>
                        <li><input type="checkbox"><span>Node 2.2.4</span>
                        <li><input type="checkbox"><span>Node 2.2.5</span>
                        <li><input type="checkbox"><span>Node 2.2.6</span>
                    </ul>
            </ul>
    </ul>
</div>

I really have no idea how to achieve this, I know I need to iterate the array over and over but I am not sure how to do this, if anyone can help, I would be very grateful for your time and knowledge

4

1 回答 1

3

您可以使用递归函数:

function buildTree($data, $parentLevel = "") {
    echo "<ul>";

    $nodeCount = 1;
    foreach ($data as $value) {
        if ($parentLevel != "") {
            $currentLevel = $parentLevel . "." . $nodeCount;
        } else {
            $currentLevel = $nodeCount;
        }

        // Output the list element
        echo "<li><input type=\"checkbox\"><span>Node " . $parentLevel . "</span></li>";

        if (isset($value["children"]) && count($value["children"]) > 0) {
            buildTree($value["children"], $parentLevel . "." . $nodeCount);
        }

        $nodeCount++;
    }
    echo "</ul>";
}
于 2013-10-02T19:35:43.893 回答