3

有一个主要由 IE 用户查看的网页,所以 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>

任何帮助都可以让它垂直列出 alpha。

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" 的标签。虽然我怀疑在单个表中包含多个 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

这对我有用。请注意,在我标记的行(// 添加的行)上发现行数后,将根据行数重置列。您可以看到我正在使用 screenWidth 和 itemWidth 来计算我的列数。

当空项目数大于行数时会出现问题。如果我有 8 列和 17 条记录,我会得到 3 行(天花板(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 回答
0

标题说明 5 列,但您的示例显示 3。我假设为 3。

将数据存储在数组中并对其进行排序后,请执行以下操作:

对于 3 列,您希望位置 0、3、6 在同一行上。下一行将有每个这些值的增量 1。所以,1,4,7。下一行将是 2,5,8。

因此,您可以将 for 循环更改为最初保存 3 个值。0,3,6,然后每个递增,并创建下一行。

于 2010-06-14T20:33:18.857 回答