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 つのアイテムしかない場合、Web サイトでは次のようにレンダリングされます。

<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 に答える