4

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

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 个象限中的每一个统一创建。

我是来帮助回答你的问题的，如果你愿意帮助我的话：）

我知道把它描述得足够清楚有点复杂......

4

1 回答 1

2

这比我预期的要复杂一些，因为您想要分发物品的方式。但这应该可以解决问题。

该函数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;
}
于 2012-11-03T18:58:17.240 回答