3

主にIEユーザーが閲覧できるWebページがあるので、CSS3は問題外です。

私はそれを次のようにリストしたい:

A  D  G
B  E  H
C  F  I

現在リストされている関数は次のとおりです。

A B C
D E F
G H I

function listPhoneExtensions($group,$group_title) {
  $adldap = new adLDAP();
  $group_membership = $adldap->group_members(strtoupper($group),FALSE);

    sort($group_membership);
    print "
    <a name=\"".strtolower($group_title)."\"></a>
    <h2>".$group_title."</h2>
    <ul class=\"phone-extensions\">";
  foreach ($group_membership as $i => $username) {
      $userinfo = $adldap->user_info($username, array("givenname","sn","telephonenumber"));
      $displayname = "<span class=\"name\">".substr($userinfo[0]["sn"][0],0,9).", ".substr($userinfo[0]["givenname"][0],0,9)."</span><span class=\"ext\">".$userinfo[0]["telephonenumber"][0]."</span>";
      if($userinfo[0]["sn"][0] != "" && $userinfo[0]["givenname"][0] != "" && $userinfo[0]["telephonenumber"][0] != "") {
        print "<li>".$displayname."</li>";
      }
    }
    print "</ul><p class=\"clear-both\"><a href=\"#top\" class=\"link-to-top\">&uarr; top</a></p>";
}

レンダリングされたhtmlの例:

<ul class="phone-extensions">
<li><span class="name">Barry Bonds</span><span class="ext">8281</span></li>
<li><span class="name">Gerald Clark</span><span class="ext">8211</span></li>
<li><span class="name">Juan Dixon</span><span class="ext">8282</span></li>
<li><span class="name">Omar Ebbs</span><span class="ext">8252</span></li>
<li><span class="name">Freddie Flank</span><span class="ext">2281</span></li>
<li><span class="name">Jerry Gilmore</span><span class="ext">4231</span></li>
<li><span class="name">Kim Moore</span><span class="ext">5767</span></li>
<li><span class="name">Barry Bonds</span><span class="ext">8281</span></li>
<li><span class="name">Gerald Clark</span><span class="ext">8211</span></li>
<li><span class="name">Juan Dixon</span><span class="ext">8282</span></li>
<li><span class="name">Omar Ebbs</span><span class="ext">8252</span></li>
<li><span class="name">Freddie Flank</span><span class="ext">2281</span></li>
<li><span class="name">Jerry Gilmore</span><span class="ext">4231</span></li>
<li><span class="name">Kim Moore</span><span class="ext">5767</span></li>
<li><span class="name">Barry Bonds</span><span class="ext">8281</span></li>
<li><span class="name">Gerald Clark</span><span class="ext">8211</span></li>
<li><span class="name">Juan Dixon</span><span class="ext">8282</span></li>
<li><span class="name">Omar Ebbs</span><span class="ext">8252</span></li>
<li><span class="name">Freddie Flank</span><span class="ext">2281</span></li>
<li><span class="name">Jerry Gilmore</span><span class="ext">4231</span></li>
<li><span class="name">Kim Moore</span><span class="ext">5767</span></li>
</ul>

アルファを垂直にリストするために助けをいただければ幸いです。

4

4 に答える 4

3

重要なデータを配列にロードして、それらをカウントし、必要な順序でステップスルーできるようにします。次に、次のようなアルゴリズムを使用して、正しい順序でそれらを取得します。

$items = BuildItemArray(); // Get the values into an array.
$columnCount = 5;
$itemCount = count($items);

$rowCount = ceil($itemCount / $columnCount);
for ($i = 0; $i < $rowCount * $columnCount; $i++)
{
    $index = ($i % $columnCount) * $rowCount + floor($i / $columnCount);
    if ($index < $itemCount)
    {
        DisplayItem($items[$index]);
    }
    else
    {
        DisplayBlank();
    }
}

私はそれがうまくいくはずだと思いますが、私はそれをテストしていません。

于 2010-06-14T20:35:36.780 に答える
1

次の理由で、この古い質問に対する回答を投稿しています。

  1. 私の答えはもっと一般的で、他の人が適応しやすいです。
  2. 過度に複雑なソリューションは必要ありませんでした。
  3. 私の配列は、文字列キーを使用して関連付けられていました。ところで、私のソリューションは、連想配列とインデックス付き配列の両方で機能します。

実際、私が思いついた解決策は非常に単純でした。巨大なテーブルの中で、style = "float:left"を使用して複数のタグを使用します。1つのテーブルに複数のtbodyタグがあると、HTML検証に合格するかどうかについては疑問がありましたが、実際にはエラーなしで合格しました。

次の点に注意してください

  • $ numColsは、必要な列数です。
  • フローティングアイテムであるため、状況に応じて、親要素の幅と最小幅を設定したり、<br style = "clear:both"/>を追加したりする必要がある場合があります。
  • 別の並べ替え方法については、http://php.net/manual/en/array.sorting.phpを参照してください。

これが私の完全な答えです:

function sortVertically( $data = array() )
{
    /* PREPARE data for printing */
    ksort( $data );     // Sort array by key.
    $numCols    = 5;    // Desired number of columns
    $numCells   = is_array($data) ? count($data) : 1 ;
    $numRows    = ceil($numCells / $numCols);
    $extraCells = $numCells % $numCols;  // Store num of tbody's with extra cell
    $i          = 0;    // iterator
    $cCell      = 0;    // num of Cells printed
    $output     = NULL; // initialize 


    /* START table printing */
    $output     .= '<div>';
    $output     .= '<table>';

    foreach( $data as $key => $value )
    {
        if( $i % $numRows === 0 )   // Start a new tbody
        {
            if( $i !== 0 )          // Close prev tbody
            {
                $extraCells--;
                if ($extraCells === 0 )
                {
                    $numRows--;     // No more tbody's with an extra cell
                    $extraCells--;  // Avoid re-reducing numRows
                }
                $output .= '</tbody>';
            }

            $output .= '<tbody style="float: left;">';
            $i = 0;                 // Reset iterator to 0
        }
        $output .= '<tr>';
            $output .= '<th>'.$key.'</th>';
            $output .= '<td>'.$value.'</td>';
        $output .= '</tr>';

        $cCell++;                   // increase cells printed count
        if($cCell == $numCells){    // last cell, close tbody
            $output .= '</tbody>';
        }

        $i++;
    }

    /* FINISH table printing */
    $output .= '</table>';
    $output .= '</div>';
    return $output;
}

この答えがいつかあなたのお役に立てば幸いです。

于 2014-03-12T03:11:26.497 に答える
0

タイトルには5列と記載されていますが、例では3を示しています。3と仮定します。

データを配列に格納し、並べ替えたら、次の手順を実行します。

3列の場合、同じ行の位置0、3、6が必要です。次の行には、これらの各値が1ずつ増加します。つまり、1、4、7。次の行は2、5、8になります。

したがって、最初に3つの値を保持するようにforループを変更できます。0、3、6、次にそれぞれをインクリメントし、次の行を作成します。

于 2010-06-14T20:33:18.857 に答える
0

これが私のために働いたものです。列は、ラベルを付けた行(//追加された行)で検出された後、rowCountに基づいてリセットされることに注意してください。screenWidthとitemWidthを使用して列数を計算していることがわかります。

空のアイテムの数が行の数よりも多い場合に問題が発生します。8列と17レコードがある場合、3行になります(Ceiling(17/8)= 3)。これは問題です(3 * 8)-17=7つの空のレコード。そして、これが起こることです:

RECORD RECORD RECORD RECORD RECORD RECORD ------ ------
RECORD RECORD RECORD RECORD RECORD RECORD ------ ------
RECORD RECORD RECORD RECORD RECORD ------ ------ ------

行は3なので、追加したコード行で修正されます。

columnCount = Math.Ceiling(itemCount / rowCount);

columnCount = 17/3 Ceiling = 6(columns)なので、レイアウトは次のようにレンダリングされます(クライアントが幅を計算します)。

RECORD RECORD RECORD RECORD RECORD RECORD  
RECORD RECORD RECORD RECORD RECORD RECORD 
RECORD RECORD RECORD RECORD RECORD ------ 

うまくいけば、それは私の問題に直面していた人を助けるでしょう。

    private List<CompanyCourseViewModel> Reorder(List<CompanyCourseViewModel> courses, Decimal width, Decimal itemWidth)
    {
        var list = new List<CompanyCourseViewModel>();
        var columnCount = Math.Floor(width / itemWidth);
        var itemCount = courses.Count();
        var rowCount = Math.Ceiling(itemCount / columnCount);
        columnCount = Math.Ceiling(itemCount / rowCount); // Added line.

        for (var i = 0; i < rowCount * columnCount; i++)
        {
            var index = (int) ((i%columnCount) * rowCount + Math.Floor(i/columnCount));
            if (index < itemCount)
            {
                courses[index].NumColumns = (int) columnCount;
                list.Add(courses[index]);
            }
            else 
            {
                list.Add(new CompanyCourseViewModel()
                {
                    Id = -Math.Abs(i - courses.Count()),
                    Title = "----",
                    NumColumns = (int)columnCount
                });
            }
        }

        return list;
    } 
于 2013-12-18T16:23:29.647 に答える