让DcatAdmin再放光芒系列- 数据表格跨行合并单元格

先看效果

dcat-admin 数据表格跨行合并单元格

技术实现

需要改动dcat-admin 源码

  • 改动文件:vendor/dcat/laravel-admin/src/Grid/Row.php
    原来有一个 columnAttributes 函数,是返回的样式属性字符串。
    现在需要返回的是一个数组,判断有没有 mergeRows 键值。
    所以需要追加一个函数直接返回数组

    /**
       * 返回行样式属性数组
       * @param  string  $column
       * @return string
       */
      public function columnAttributesArr($column)
      {
          if (
              ($column = $this->grid->columns()->get($column))
              && ($attributes = $column->getAttributes())
          ) {
              return $attributes;
          }
    
          return [];
      }
  • 改动模块文件:vendor/dcat/laravel-admin/resources/views/grid/table.blade.php

    {{-- 把原来的注释掉 --}}
              {{--@foreach($grid->rows() as $row)
                  <tr {!! $row->rowAttributes() !!}>
                      @foreach($grid->getVisibleColumnNames() as $name)
                          <td {!! $row->columnAttributes($name) !!}>{!! $row->column($name) !!}</td>
                      @endforeach
                  </tr>
              @endforeach--}}
    
              {{-- 添加新的实现代码 --}}
              @php $mergerow_arr = []; $field = ''; @endphp
              @foreach($grid->rows() as $row)
                  @foreach($grid->getVisibleColumnNames() as $name)
                      @if(!empty($row->columnAttributesArr($name)['mergeRows']))
                          @php
                              if(!empty($mergerow_arr[$row->column($name)])){
                                  $mergerow_arr[$row->column($name)] = $mergerow_arr[$row->column($name)] + 1;
                              }else{
                                  $mergerow_arr[$row->column($name)] = 1;
                              }
    
                          @endphp
                      @endif
                  @endforeach
              @endforeach
    
              @foreach($grid->rows() as $row)
                  <tr {!! $row->rowAttributes() !!}>
    
                      @foreach($grid->getVisibleColumnNames() as $name)
                          @if(!empty($mergerow_arr[$row->column($name)]))
                              <td style="text-align: center; vertical-align: middle;" rowspan="{{$mergerow_arr[$row->column($name)]}}">{!! $row->column($name) !!}</td>
                              @php unset($mergerow_arr[$row->column($name)]);$mergerow_arr[$row->column($name).'_use'] = 1 @endphp
    
                          @else
                              @if(!empty($mergerow_arr[$row->column($name).'_use']))
                              @else
                                  <td {!! $row->columnAttributes($name) !!}>{!! $row->column($name) !!}</td>
                              @endif
                          @endif
    
                      @endforeach
                  </tr>
              @endforeach

使用方法

$grid->column('room.name','房型')->setAttributes(['mergeRows'=> '1']);

获取模型数据时要注意 ,要用这个字段去做排序,要把同一个类型的数据聚合在一起,不然会乱。

$grid->model()->where(['hotel_id' => Admin::user()->hotel_id])->orderBy('room_id', 'ASC');

特别说明

以上实现方法,不支持 组合表头固定列

本人也知道这个方法不够高明,如果你有更好的实现方式,还希望与大家分享。

本作品采用《CC 协议》,转载必须注明作者和本文链接
Dcat-Admin (plus版)是汇聚Filament,Laravel-admin , Dcat-admin 优点于一身的基于Laravel + Bootstrap 的极速开发框架
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 4

这个适合用日历组件显示吧

5个月前 评论

dcat能做到这个效果是完全超出了我对他的预期的,very nice,感谢大佬分享 :+1:

5个月前 评论
Dcatplus-杨光 (楼主) 5个月前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
Dcat-plus Admin @ 速码邦
文章
30
粉丝
49
喜欢
166
收藏
143
排名:455
访问:2.0 万
私信
所有博文
社区赞助商