如何设计一个像这个有角度的图像的html表格？

Posted 2023-03-05

【中文标题】如何设计一个像这个有角度的图像的html表格？

【英文标题】：How to design a html table as like this image with angular?

【发布时间】：2021-12-03 08:49:12

【问题描述】：

我正在尝试以角度创建一个 html 表。我有一个包含在下面的 json。在 json 中首先有资产头和资产头子列表。在资产头子列表下有帐户头列表。 我想通过这个json设计一个html表格。

json

[
  
    assetHead: 'Fixed Asset',
    assetSubHeadList: [
      
        subHead: 'Property, Plant & Equipment',
        accountHeadList : [
          
            accId: 101234,
            accName: 'Office Equipment',
            obDebit: 72045,
            obCredit: 0,
            cpDebit: 0,
            cpCredit: 0,
            cbDebit: 75845,
            cbCredit: 0
          ,
          
            accId: 101234,
            accName: 'Motor Vehicle',
            obDebit: 72045,
            obCredit: 0,
            cpDebit: 0,
            cpCredit: 0,
            cbDebit: 75845,
            cbCredit: 0
          ,
        ]
      ,
    ],
  
];

餐桌设计会像这张图片

【参考方案1】：

首先，为了性能优化，我会创建一个纯管道用于总和计算：

sum.pipe.ts

import  Pipe, PipeTransform  from '@angular/core';

@Pipe(
  name: 'sum'
)
export class SumPipe<T> implements PipeTransform 
  transform(arr: Array< [k in keyof T]: number >, prop: keyof T): any 
    return arr.reduce((sum, cur) => sum + cur[prop], 0);
  
 

那么如果您知道colspan 和rowspan 属性，那么您的设计应该很容易实现：

<table>
  <thead>
    <tr>
      <td rowspan="2">Acc Ca</td>
      <td rowspan="2">Accounts Head</td>
      <td colspan="2">Opening Balance Period</td>
      <td colspan="2">Current Period</td>
      <td colspan="2">Closing Balance</td>
    </tr>
    <tr>
      <td>Debit</td>
      <td>Credit</td>
      <td>Debit</td>
      <td>Credit</td>
      <td>Debit</td>
      <td>Credit</td>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let asset of json">
      <tr>
        <td colspan="8"> asset.assetHead </td>
      </tr>
      <ng-container *ngFor="let subHeadItem of asset.assetSubHeadList">
        <tr>
          <td colspan="8"> subHeadItem.subHead </td>
        </tr>
        <tr *ngFor="let headItem of subHeadItem.accountHeadList">
          <td> headItem.accId </td>
          <td> headItem.accName </td>
          <td> headItem.obDebit </td>
          <td> headItem.obCredit </td>
          <td> headItem.cpDebit </td>
          <td> headItem.cpCredit </td>
          <td> headItem.cbDebit </td>
          <td> headItem.cbCredit </td>
        </tr>
        <tr>
          <td colspan="2"><b>Sub total</b></td>
          <td> subHeadItem.accountHeadList | sum: 'obDebit' </td>
          <td> subHeadItem.accountHeadList | sum: 'obCredit' </td>
          <td> subHeadItem.accountHeadList | sum: 'cpDebit' </td>
          <td> subHeadItem.accountHeadList | sum: 'cpCredit' </td>
          <td> subHeadItem.accountHeadList | sum: 'cbDebit' </td>
          <td> subHeadItem.accountHeadList | sum: 'cbCredit' </td>
        </tr>
      </ng-container>
    </ng-container>
  </tbody>
</table>

Ng-run Example