这是前些日子遇到的问题。某个项目使用了 ngx-datatable 这个包,但这个包没有合并单元格功能。好巧不巧,项目中的某个功能又有合并单元格的需求。于是只能想办法曲线救国。

表格的形式如下:

地区 1 类型 1 公司 1
类型 2 公司 2
公司 3

可见,表格的数据呈现树形结构。

既然没办法合并单元格,那么就尝试合并数据。以第一列的地区作为主干,表格每一行包含一个地区内所有数据,第二列循环取出当前地区内的所有类型。再根据每个类型的公司数量调整高度。第三列只需要循环取出所有公司。

API

由于前端列表需要返回树形结构数据。所以需要对 API 做些修改。

在模型内添加:

在 Repository 中修改对应的方法:

在 Transformer 中格式化数据:

于是得到了如下结构的数据:

前端

现在有了 API 返回的新数据,可以给表格绑定上了。
第一列没有什么需要修改。
第二列需要循环出 types 数组内的数据,并根据子数组 company 的子类数量设定当前循环内区块的高度:

第三列需要嵌套循环出 companys 数组内的数据:

效果

进过上述修改,可以得到如下效果:

发表评论

电子邮件地址不会被公开。 必填项已用*标注