【问题标题】:How to chunk results into 3 columns如何将结果分块为 3 列
【发布时间】:2016-08-01 11:11:52
【问题描述】:

我有一组结果(例如 [1,2,3,4,5,6,7,8,9,10,11])。

我希望显示为 1 行 3 列

1|5|9
2|6|10
3|7|11
4|8|

我得到的是 1 行 4 列

1|4|7
2|5|8
3|6|9

10|
11|

直到我添加第 12 个对象,然后我得到 1 行 3 列

1|5|9
2|6|10
3|7|11
4|8|12

我在刀片模板中的代码

<!-- partials/tables/table_list.blade.php -->

@section('tables')
<?php $chunkSize = floor(count($tables) / 3); ?>
<section id="tables-overview">
    <div class="row">
        @foreach ($tables->chunk($chunkSize , 1) as $chunk)
        <div class="col-md-4">
            @include('partials.tables.table_chunk')
        </div>
        @endforeach
    </div>
</section>
@endsection

<!-- partials/tables/table_chunk.blade.php -->

<table class="table table-responsive">
<thead>
    <tr>
        <th class="text-center">@lang('table.identifier')</th>
        <th class="text-center">@lang('table.property')</th>
        <th class="text-center">
            @permission('manage-tables')
                <a href="{{ route('CreateTable') }}">@lang('action.create')</a>
            @endpermission
        </th>
    </tr>
</thead>
<tbody>
    @foreach ($chunk as $table)
    <tr>
        <td class="text-center">{{ $table->getId() }}</td>
        <td class="text-center">{{ $table->getProperty() }}</td>
        <td class="text-center">
            @permission('manage-tables')
                <a class="btn btn-primary" href="{{ route('UpdateTable', ['id' => $table->getId()]) }}">@lang('action.update')</a>
            @endpermission
        </td>
    </tr>
    @endforeach

</tbody>
</table>

当 $tables 的数量可以除以 3(我想要的列数)时,我得到 3 个块。如果没有,我会得到 3 个块 + 剩余的 1 个或 2 个对象,它们都放在第 4 列中。我可以像here 那样水平放置它们,但我觉得这很“奇怪”。阅读列表时,您先从上到下阅读,然后再从左到右阅读。

更新 我还尝试按照 Huzaib Shafi 的建议使用 ceil()。但后来我得到了

4 objects (funny looking)
1|3|
2|4|

5 objects (better looking)
1|3|5
2|4

这也不是我想要的 100%,但非常接近。接下来我会尝试Homam Alhaytham的建议。

【问题讨论】:

    标签: php twitter-bootstrap laravel laravel-5 chunks


    【解决方案1】:

    当您floor 除法结果时,您会得到较小的数字。

    解释: floor(11/3) = 3。因此,您的结果一次被分块 3(导致;[3,3,3,2]),但是我们需要 [4 ,4,3]。

    所以你需要ceil它。给你 4,因此结果。

    <?php $chunkSize = ceil(count($tables) / 3); ?>
    

    【讨论】:

      【解决方案2】:

      通过获取数据库数据获取 $items 并使用循环示例后

      $c=0;
      echo '<div class="row">';
      while(bla bla bla ..){
      // counter
      $c++;
      echo '<div class="col-md-4">
      some thing 
              </div>';
      if(fmod($c,3)==0){
      echo '</div><div class="row">';
      }
      }
      
      echo '</div>';
      

      这里我使用了 fmod($c,3) 3 个数字,如果 $c 是 6,9,12,15,18 则 fmod 返回 0.....

      【讨论】:

      • 我也考虑过这样做,只是觉得使用chunk方式更干净、更短、更容易。不管怎样,我可能会这样做。
      【解决方案3】:

      使用array_chunk

      假设你有以下数组:

      [
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
      ];
      

      在您的 .blade.php 文件中,您可以执行以下操作:

      @section('tables')
      <section id="tables-overview">
          <div class="row">
              @foreach (array_chunk($tables, 3) as  $chunk)
              <div class="col-md-4">
                  @foreach($chunk as $key => $value)
                  //@include('partials.tables.table_chunk')
                  // No need to include anything here
                  // just write your table instead of including
                  @endforeach
              </div>
              @endforeach
          </div>
      </section>
      @endsection
      

      【讨论】:

      • 我将我的观点分成更小的部分,这让它们对我来说更具可读性。其中一些微小的部分包含在不止一个视图中。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-04-11
      • 1970-01-01
      • 1970-01-01
      • 2021-06-03
      • 1970-01-01
      相关资源
      最近更新 更多