这是前些日子遇到的问题。某个项目使用了 ngx-datatable 这个包，但这个包没有合并单元格功能。好巧不巧，项目中的某个功能又有合并单元格的需求。于是只能想办法曲线救国。
表格的形式如下：
| 地区 1 | 类型 1 | 公司 1 |
| 类型 2 | 公司 2 | |
| 公司 3 |
可见，表格的数据呈现树形结构。
既然没办法合并单元格，那么就尝试合并数据。以第一列的地区作为主干，表格每一行包含一个地区内所有数据，第二列循环取出当前地区内的所有类型。再根据每个类型的公司数量调整高度。第三列只需要循环取出所有公司。
API
由于前端列表需要返回树形结构数据。所以需要对 API 做些修改。
在模型内添加：
|
1 2 3 4 5 |
public function types() { return $this->hasMany(self::class, 'area', 'area'); } |
在 Repository 中修改对应的方法：
|
1 2 3 4 5 |
public function index() { return Company::with('types')->groupBy('area')->select('area')->paginate(10); } |
在 Transformer 中格式化数据：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
public function transform($data) { return [ 'area' => $data->area, 'types' => $this->transFormType($data->types), ]; } public function transFormType($data) { $data = $data->groupBy('type'); $result = []; foreach ($data as $key => $value) { $result[] = [ 'type' => $key, 'companys' => $value, ]; } return $result; } |
于是得到了如下结构的数据：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
{ "area": "上海", "types": [ { "type": "日化", "companys": [ { "id": 1, "area": "上海", "type": "日化", "company": "上海日化二厂" } ] }, { "type": "汽车", "companys": [ { "id": 3, "area": "上海", "type": "汽车", "company": "上海汽车一厂" } ] }, { "type": "医药", "companys": [ { "id": 10, "area": "上海", "type": "医药", "company": "上海医药一厂" }, { "id": 11, "area": "上海", "type": "医药", "company": "上海医药四厂" } ] } ] } |
前端
现在有了 API 返回的新数据，可以给表格绑定上了。
第一列没有什么需要修改。
第二列需要循环出 types 数组内的数据，并根据子数组 company 的子类数量设定当前循环内区块的高度：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ngx-datatable-column name="type"> <ng-template let-column="column" ngx-datatable-header-template> <span>类型</span> </ng-template> <ng-template let-row="row" ngx-datatable-cell-template> <div *ngFor="let type of row.types" [style.height.px]="type.companys.length*34" [style.line-height.px]="type.companys.length*34"> {{type.type}} </div> </ng-template> </ngx-datatable-column> |
第三列需要嵌套循环出 companys 数组内的数据：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ngx-datatable-column name="company"> <ng-template let-column="column" ngx-datatable-header-template> <span>公司</span> </ng-template> <ng-template let-row="row" ngx-datatable-cell-template> <div *ngFor="let type of row.types"> <div *ngFor="let company of type.companys" style="height:34px;line-height:34px"> {{company.company}} </div> </div> </ng-template> </ngx-datatable-column> |
效果
进过上述修改，可以得到如下效果：
