让DcatAdmin再放光芒系列- 数据表格跨行合并单元格
先看效果
技术实现
需要改动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能做到这个效果是完全超出了我对他的预期的,very nice,感谢大佬分享 :+1: