php - 将数组数据准备到另一个结构以使用某些规则呈现定义的 HTML 输出的算法

Question

拜托，很长一段时间我都没有成功找到解决这个(对我来说非常困难的)问题的方法，我非常感谢任何帮助:

1) 我有像这样的简单数组中的数据，没有问题:

$data = array(
    array('id => 1', 'name' => 'Some name 1'),
    array('id => 2', 'name' => 'Some name 2'),
    array('id => 3', 'name' => 'Some name 3'),
    ...
);

2) 但我必须将上面显示的数据渲染成 HTML 结构，理论上非常类似于树结构，其中每个父节点最多有 4 个叶子，每个节点可以成为接下来 4 个子节点的父节点(对树深度没有任何限制)。

a) 因此，如果我的数组中只有 4 个项目，则在网站上呈现为:

<div class="group">
    <div class="group"><a href="#">Item 1</a></div>
    <div class="group"><a href="#">Item 2</a></div>
    <div class="group"><a href="#">Item 3</a></div>
    <div class="group"><a href="#">Item 4</a></div>
</div>

b) 如果有 5 个项目，它应该像这样呈现:

<div class="group">
    <div class="group"><a href="#">Item 1</a></div>
    <div class="group"><a href="#">Item 2</a></div>
    <div class="group"><a href="#">Item 3</a></div>
    <div class="group">
        <div class="group"><a href="#">Item 4</a></div>
        <div class="group"><a href="#">Item 5</a></div>
    </div>
</div>

c) 如果有 6 个项目，它应该像这样呈现:

<div class="group">
    <div class="group"><a href="#">Item 1</a></div>
    <div class="group"><a href="#">Item 2</a></div>
    <div class="group">
        <div class="group"><a href="#">Item 3</a></div>
        <div class="group"><a href="#">Item 4</a></div>
    </div>
    <div class="group">
        <div class="group"><a href="#">Item 5</a></div>
        <div class="group"><a href="#">Item 6</a></div>
    </div>
</div>

d) 如果有 16 个项目，它应该像这样呈现:

<div class="group">
    <div class="group">
        <div class="group"><a href="#">Item 1</a></div>
        <div class="group"><a href="#">Item 2</a></div>
        <div class="group"><a href="#">Item 3</a></div>
        <div class="group"><a href="#">Item 4</a></div>
    </div>
    <div class="group">
        <div class="group"><a href="#">Item 5</a></div>
        <div class="group"><a href="#">Item 6</a></div>
        <div class="group"><a href="#">Item 7</a></div>
        <div class="group"><a href="#">Item 8</a></div>
    </div>
    <div class="group">
        <div class="group"><a href="#">Item 9</a></div>
        <div class="group"><a href="#">Item 10</a></div>
        <div class="group"><a href="#">Item 11</a></div>
        <div class="group"><a href="#">Item 12</a></div>
    </div>
    <div class="group">
        <div class="group"><a href="#">Item 13</a></div>
        <div class="group"><a href="#">Item 14</a></div>
        <div class="group"><a href="#">Item 15</a></div>
        <div class="group"><a href="#">Item 16</a></div>
    </div>
</div>

e) 如果有 21 个项目，它应该像这样呈现:

<div class="group">
    <div class="group">
        <div class="group"><a href="#">Item 1</a></div>
        <div class="group"><a href="#">Item 2</a></div>
        <div class="group"><a href="#">Item 3</a></div>
        <div class="group">
            <div class="group"><a href="#">Item 4</a></div>
            <div class="group"><a href="#">Item 5</a></div>
        </div>
    </div>
    <div class="group">
        <div class="group"><a href="#">Item 6</a></div>
        <div class="group"><a href="#">Item 7</a></div>
        <div class="group"><a href="#">Item 8</a></div>
        <div class="group">
            <div class="group"><a href="#">Item 9</a></div>
            <div class="group"><a href="#">Item 10</a></div>
        </div>
    </div>
    <div class="group">
        <div class="group"><a href="#">Item 11</a></div>
        <div class="group"><a href="#">Item 12</a></div>
        <div class="group"><a href="#">Item 13</a></div>
        <div class="group">
            <div class="group"><a href="#">Item 14</a></div>
            <div class="group"><a href="#">Item 15</a></div>
        </div>
    </div>
    <div class="group">
        <div class="group"><a href="#">Item 16</a></div>
        <div class="group"><a href="#">Item 17</a></div>
        <div class="group"><a href="#">Item 18</a></div>
        <div class="group">
            <div class="group"><a href="#">Item 19</a></div>
            <div class="group"><a href="#">Item 20</a></div>
            <div class="group"><a href="#">Item 21</a></div>
        </div>
    </div>
</div>

以上示例是为全背景屏幕设计的，分为 4 个主要相等的区域，这 4 个区域内部最多也可以包含 4 个区域，每个区域还可以包含接下来的 4 个区域，依此类推。

如果以 4 为模的项目总摘要计数为 0，则网站上的宽度和高度区域将相同，但除此之外，有些区域更大，有些区域分成更多子区域，为此，上述 HTML 代码可以正常工作(在静态页面上测试得很好)。

所以我很难找到如何将简单的数组数据转换成某种结构，以便通过任何递归函数或其他东西处理，以呈现所需的结果。

但正如我所写，我没有成功，主要是因为每个新的子容器都应该从结构的最后一个开始创建，并为 4 个主要象限中的每个象限统一创建。

我来这里是为了帮助回答你的问题，如果你愿意帮助我的话:)

我知道要描述清楚它有点复杂......

Answer 1

这比我预期的要棘手一些，因为您想要分配元素的方式。但这应该可以解决问题。

arrangeGroups() 函数将创建一个嵌套数组，就像您描述的那样。创建一个将此数据呈现为嵌套 div 的函数应该没有问题。

我添加了一些设置代码来动态生成任意数量的数组条目。使测试更容易。

define('GROUP_SIZE', 4);

$things = array();

for($idx=1; $idx<=21; $idx++)
    $things[] = array( 'id'=>$idx, 'name'=>"Some name $idx" );

$groups = arrangeGroups($things);
print_r($groups);

function arrangeGroups($items) {
    $tempGroups = array();
    $itemCount = count($items); // we use this a lot.

    // The hardest part here is figuring out how many items go into each group.
    // Build an array of how big each subgroup should be.
    // Put all the remainder items at the end of the array.
    // Six items divided into four groups will yield the array
    // (1, 1, 2, 2)
    $groupings = array_fill(0, GROUP_SIZE, intval($itemCount/GROUP_SIZE));
    $remainder = $itemCount % GROUP_SIZE ;
    for ($idx=$remainder; $idx>0; $idx--)
        $groupings[GROUP_SIZE-$idx]++;

    // now we just create slices of the array we were given, using $groupings as our guide
    $offset = $idx = 0;
    do {
        $sliceSize = $groupings[$idx];

        if ( $sliceSize == 1 )
            $tempGroups[] = $items[$offset];
        else if ( $sliceSize > 1 )
            $tempGroups[] = arrangeGroups( array_slice($items, $offset, $sliceSize) );

        $offset += $sliceSize;
        $idx++;
    } while ($idx < GROUP_SIZE);

    return $tempGroups;
}