angular 合并单元格 倾斜列头 动态列

于 2023-10-19 13:20:03 发布
阅读量109 收藏
点赞数
文章标签： angular.js css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CoolDog_1/article/details/133922220
版权

效果图：

html代码：

<nz-table
#groupingTable
[nzData]="listOfDisplayData"
nzBordered
nzSize="middle"
nzShowPagination="false"
[nzWidthConfig]="widthConfig"
[nzScroll]="scrollConfig"
nzFrontPagination="false"
>
<thead>
  <tr style="position: relative;background-color: blueviolet;" >
    <th colspan="4" class="fontWhite" style="background-color: blueviolet;border: none;">Pilot Job Task Analysis (JTA)</th>
    <th colspan="1" nzWidth="120px" class="firstTh" style="background-color: chartreuse;border: none;">Task Competency  Level</th>
    <th colspan="1" nzWidth="120px" class="firstTh" style="background-color:darkgrey;border: none;">PF / PM / Both (B)</th>

    <th *ngFor="let skill of Skills" colspan="1" nzWidth="120px" class="firstTh" style="background-color:turquoise;border: none;">{{skill.competencyName}}</th>
    <th *ngFor="let knowledge of Knowledges" colspan="1" nzWidth="120px" class="firstTh" style="background-color:orange;border: none;">{{knowledge.competencyName}}</th>
    <th *ngFor="let attitude of Attitudes" colspan="1" nzWidth="120px" class="firstTh" style="background-color:burlywood;border: none;">{{attitude.competencyName}}</th>
    
    <th colspan="1" nzWidth="120px" class="firstTh" style="background-color:yellow;border: none;">Train (T)/No-Train (N) Decision</th>
    <th colspan="1" nzWidth="120px" style="background-color:beige;border: none;">References</th>
  </tr>
  <tr style="border: none;">
    <th colspan="4" class="fontWhite" style="background-color: blueviolet;border: none;"></th>
    <th colspan="1" style="background-color: chartreuse;border: none;"></th>
    <th colspan="1" style="background-color:darkgrey;border: none;"></th>
    
    <th *ngFor="let skill of Skills" colspan="1" nzWidth="150px" style="background-color:turquoise;border: none;">{{skill.index}}</th>
    <th *ngFor="let knowledge of Knowledges" colspan="1" nzWidth="150px" style="background-color:orange;border: none;">{{knowledge.index}}</th>
    <th *ngFor="let attitude of Attitudes" colspan="1" nzWidth="150px" style="background-color:burlywood;border: none;">{{attitude.index}}</th>

    <th colspan="1" style="background-color:yellow;border: none;"></th>
    <th colspan="1" style="background-color:beige;border: none;">Chapter & Section</th>
  </tr>  
  <tr>
    <th colspan="1" >Task #</th>
    <th colspan="1" >Function</th>
    <th colspan="1" >Task</th>
    <th colspan="1" >Sub-Task</th>

    <th colspan="2" style="background-color: beige;" ></th>
    <th [attr.colspan]="this.CompetencyCount" class="fontWhite" style="background-color:black;" >Skills, Knowledge, Attitude</th>
    <th colspan="1" style="background-color: beige;" ></th>
    <th colspan="1" style="background-color: beige;" ></th>

  </tr>
  <tr>
    <th colspan="1" style="background-color: beige;" ></th>
    <th colspan="1" style="background-color: beige;" ></th>
    <th colspan="1" style="background-color: beige;" ></th>
    <th colspan="1" style="background-color: beige;" ></th>

    <th [attr.colspan]="this.CompetencyCount+2" style="background-color: beige;" >NOTE: The SKA levels here equate to the final assessment levels.</th>

    <th colspan="1" style="background-color: beige;" ></th>
    <th colspan="1" style="background-color: beige;" ></th>

  </tr>
</thead>
<tbody>
  <tr *ngFor="let data of groupingTable.data">
    

    <td [style.color]="data.jtaType==1?'white':'black'" [style.border]="data.jtaType==1?'none':''" [style.background-color]="data.jtaType==1?'#041981':''" colspan="1" (click)="test()"  >{{ data.taskCode }}</td>
    <td [style.color]="data.jtaType==1?'white':'black'" [style.border]="data.jtaType==1?'none':''" [style.background-color]="data.jtaType==1?'#041981':''" colspan="1"   >{{ data.function }}</td>
    <td [style.color]="data.jtaType==1?'white':'black'" [style.border]="data.jtaType==1?'none':''" [style.background-color]="data.jtaType==1?'#041981':''" colspan="1"   >{{ data.task }}</td>
    <td [style.color]="data.jtaType==1?'white':'black'" [style.border]="data.jtaType==1?'none':''" [style.background-color]="data.jtaType==1?'#041981':''" colspan="1"   >{{ data.subTask }}</td>
    <td [style.color]="data.jtaType==1?'white':'black'" [style.border]="data.jtaType==1?'none':''" [style.background-color]="data.jtaType==1?'#041981':''" colspan="1"   >
      <ng-container *ngIf="data.taskCompetencyLevel!=null;">
        <nz-select style="width: 100%;" [(ngModel)]="data.taskCompetencyLevel">
          <nz-option nzValue="C1" nzLabel="C1"></nz-option>
          <nz-option nzValue="C2" nzLabel="C2"></nz-option>
          <nz-option nzValue="C3" nzLabel="C3"></nz-option>
        </nz-select>
      </ng-container>
    </td>
    <td [style.color]="data.jtaType==1?'white':'black'" [style.border]="data.jtaType==1?'none':''" [style.background-color]="data.jtaType==1?'#041981':''" colspan="1"   >      
      <ng-container *ngIf="data.pfpmBoth!=null;">
        <nz-select style="width: 100%;" [(ngModel)]="data.pfpmBoth">
          <nz-option nzValue="PF" nzLabel="PF"></nz-option>
          <nz-option nzValue="PM" nzLabel="PM"></nz-option>
          <nz-option nzValue="B" nzLabel="B"></nz-option>
        </nz-select>
      </ng-container>      
    </td>

    <td [style.color]="data.jtaType==1?'white':'black'" [style.border]="data.jtaType==1?'none':''" [style.background-color]="data.jtaType==1?'#041981':''" colspan="1" *ngFor="let skill of Skills" nzWidth="150px" >
      <ng-container *ngIf="data.skillList[skill.competencyName];">
        <nz-select style="width: 100%;" [(ngModel)]="data.skillList[skill.competencyName].competencyScore">
          <nz-option nzValue="S1" nzLabel="S1"></nz-option>
          <nz-option nzValue="S2" nzLabel="S2"></nz-option>
          <nz-option nzValue="S3" nzLabel="S3"></nz-option>
        </nz-select>
      </ng-container>
    </td>

    <td [style.color]="data.jtaType==1?'white':'black'" [style.border]="data.jtaType==1?'none':''" [style.background-color]="data.jtaType==1?'#041981':''" colspan="1" *ngFor="let knowledge of Knowledges"  nzWidth="150px" >
      <ng-container *ngIf="data.knowledgeList[knowledge.competencyName];">
        <nz-select style="width: 100%;" [(ngModel)]="data.knowledgeList[knowledge.competencyName].competencyScore">
          <nz-option nzValue="K1" nzLabel="K1"></nz-option>
          <nz-option nzValue="K2" nzLabel="K2"></nz-option>
          <nz-option nzValue="K3" nzLabel="K3"></nz-option>
        </nz-select>
      </ng-container>
    </td>

    <td [style.color]="data.jtaType==1?'white':'black'" [style.border]="data.jtaType==1?'none':''" [style.background-color]="data.jtaType==1?'#041981':''" colspan="1" *ngFor="let attitude of Attitudes" nzWidth="150px" >
      <ng-container *ngIf="data.attitudeList[attitude.competencyName];">
        <nz-select style="width: 100%;" [(ngModel)]="data.attitudeList[attitude.competencyName].competencyScore">
          <nz-option nzValue="A1" nzLabel="A1"></nz-option>
          <nz-option nzValue="A2" nzLabel="A2"></nz-option>
          <nz-option nzValue="A3" nzLabel="A3"></nz-option>
        </nz-select>
      </ng-container>
    </td>

    <td [style.color]="data.jtaType==1?'white':'black'" [style.border]="data.jtaType==1?'none':''" [style.background-color]="data.jtaType==1?'#041981':''" colspan="1" >      
      <ng-container *ngIf="data.trainNoTrainDecision!=null;">
        <nz-select style="width: 100%;" [(ngModel)]="data.trainNoTrainDecision">
          <nz-option nzValue="T" nzLabel="T"></nz-option>
          <nz-option nzValue="NT" nzLabel="NT"></nz-option>
        </nz-select>
      </ng-container>
    </td>
    <td colspan="1">{{ data.references }}</td>
  </tr>
</tbody>
</nz-table>

ts代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-view-jta',
  templateUrl: './view-jta.component.html',
  styleUrls:["./view-jta.component.less"]
})
export class ViewJtaComponent implements OnInit{

  // widthConfig = ['100px', '200px', '200px', '100px', '100px', '200px', '200px', '100px'];
  widthConfig = [];
  // scrollConfig = { x: '1200px', y: '240px' };
  scrollConfig={ };;
  listOfDisplayData: any[] = [];
  mainData: any[] = [];
  Skills = [];
  Knowledges = [];
  Attitudes = [];
  CompetencyCount = 0;

  sortValue: 'ascend' | 'descend' | null = null;
  filterName = [{ text: 'Joe', value: 'Joe' }, { text: 'John', value: 'John' }];
  searchName: string[] = [];

  search(searchName: string[]): void {
    this.searchName = searchName;

    this.listOfDisplayData = this.mainData.sort((a, b) =>
      this.sortValue === 'ascend' ? (a.age > b.age ? 1 : -1) : b.age > a.age ? 1 : -1
    );
  }

  //#region 构造函数
  constructor() {
  }  
  ngOnInit(): void {
    this.Skills = [{index:1,competencyName:"Application of Procedures"},{index:2,competencyName:"Communication"},{index:3,competencyName:"Problem Solving and Decision Making"}];
    this.Knowledges = [{index:1,competencyName:"Transfer of Knowledge"}];
    this.Attitudes = [{index:1,competencyName:"Leadership and Teamwork"},{index:2,competencyName:"Teamwork"}];
    this.CompetencyCount = this.Skills.length+this.Knowledges.length+this.Attitudes.length;

    var currentSkills: { [key: string]: { competencyName: string; competencyScore:string} } = {};
    var currentKnowledges: { [key: string]: { competencyName: string; competencyScore:string} } = {};
    var currentAttitudes: { [key: string]: { competencyName: string; competencyScore:string} } = {};

    // var currentSkills = [{index:1,competencyName:"Application of Procedures",competencyScore:"S1"},{index:3,competencyName:"Problem Solving and Decision Making",competencyScore:"S3"}];
    // var currentKnowledges = [{index:1,competencyName:"Transfer of Knowledge",competencyScore:"K1"}];
    currentSkills["Application of Procedures"] = {competencyName :"Application of Procedures",competencyScore:"S1" };
    currentSkills["Problem Solving and Decision Making"] = {competencyName :"Problem Solving and Decision Making",competencyScore:"S3" };

    currentKnowledges["Transfer of Knowledge"] = {competencyName :"Transfer of Knowledge",competencyScore:"K1" };

    currentAttitudes["Leadership and Teamwork"] = {competencyName :"Leadership and Teamwork",competencyScore:"A1" };

    this.mainData.push({jtaType:1,taskCode:"01",function:"Perform Pre-Departure Ground Operations",task:"2",subTask:"3",taskCompetencyLevel:"C1",pfpmBoth:"B",skillList:currentSkills,knowledgeList:currentKnowledges,attitudeList:currentAttitudes,trainNoTrainDecision:"NT",references:"16"});
    this.mainData.push({jtaType:2,taskCode:"01.01",function:"",task:"Perform Mission Preparation Procedures",subTask:"3",taskCompetencyLevel:"C2",pfpmBoth:"5",skillList:currentSkills,knowledgeList:currentKnowledges,attitudeList:currentAttitudes,trainNoTrainDecision:"15",references:"16"});
    this.mainData.push({jtaType:2,taskCode:"01.01.01",function:"",task:"",subTask:"Comply with Company,  NAA and other applicable guidance and regulations regarding mission preparation ",taskCompetencyLevel:"4",pfpmBoth:"5",skillList:currentSkills,knowledgeList:currentKnowledges,attitudeList:currentAttitudes,trainNoTrainDecision:"15",references:"16"});

    this.listOfDisplayData = [...this.mainData];
  }
  
  //根据字符串去验证是否有值，有值显示，无值不显示；
  //CompetencyName:需要排查是否存在的数据
  //CompetencyList:数据库存储的列表数据
  showTd(CompetencyName,CompetencyList)
  {
    var result = false;
    CompetencyList.forEach(element => {
      if(element.competencyName == CompetencyName)
      {
        result = true;
        return;
      }
    });
    return result;
  }

  setCurrentData(CompetencyName,CompetencyList)
  {
    //data.skillList[skill.competencyName].competencyScore
    var currentScore = CompetencyList.find(obj=>obj.competencyName == CompetencyName).competencyScore;
    return currentScore;
  }

  test()
  {
    console.log(this.mainData)
  }
}

样式代码：

.fontWhite{
    color: white;
}

.fontBlack{
    color: black;
}

.firstTh {
    transform-origin: bottom left;
    transform: skewX(-30deg);
    width: 200px;
}

从前是晴天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Angular 合并table单元格
前端博客典中典
12-08 890
效果： html: <table class="table table-striped"> <thead> <tr> <th>影片名称</th> <th>影厅</th> <th>放映时间（{{tableDataDate}}）</th> </tr> </thead&
angular中ng-repeat生成表格并合并单元格
u010763322的专栏
05-25 651
// //html部分 <tbody ng-repeat="node in vm.stationName"> <tr ng-repeat="tr in node.items track by $index"> <td ng-if="$index ==0" rowspan="{{node.items.length}}">{{node.name}}</td> <td>{{tr.vC_SHOW_NAME}}&lt.
angular_通过指令单元格合并实现
大自然界的一颗沙子，它磨练久了会变成珍珠的。
05-25 610
jsp指令使用 <table class="table table-bordered table-hover" id="tb"> <tbody> <tr data-ng-repeat="data in pagedResultInfo.list" > <td data-ng-click="ckEvent(this,'{{data.cert...
接口返回的是每行数据而前端要合并单元格再渲染
web
03-08 199
angular 接口返回的数据结构 目标样式 代码实现 html <table style="width: 100%;border-collapse:collapse;" cellspacing="0" cellpadding="0" > <tr> <ng-container *ngFor="let item of listOfDataTitles; let i = index"> <t
element-ui + vue ,ant-design + vue , Angular + ZORRO 实现表格自动横纵向合并单元格，并自动根据单元格数据进行添加样式
tangdou369098655的博客
07-17 784
本文重点写 element-ui + vue 里单元格合并，以及根据数据进行单元格涂色等 其他案例直通车–NG-ZORRO + angular-cli11 也适用VUE,REACT，实现表格横纵向单元格合并，按需设置背景色，并解决动态合并单元格动态colspan情况下，nzLeft固定列失效问题， https://www.cnblogs.com/sugartang/p/14847537.html https://blog.csdn.net/tangdou369098655/article/details/1
table表格按列合并相同数据行单元格代码
07-13
在jsp、html页面中实现table表格按列合并相同数据行单元格代码，可实现功能为：在一个table表格中，合并指定列中所有相同数据相邻行单元格内容。
angular动态表单制作
08-27
通过实例代码给大家详细讲述了angular动态表单的制作方法，对此有需要的朋友参考下。
Angular组件动态加载示例.zip
11-19
Angular组件动态加载示例程序
Angular.js实现动态加载组件详解
11-27
这是利用Angular动态加载组件完成的，同时也会设法让这部分动态组件也支持AOT。 动态加载组件 下面以一个Step组件为示例，完成一个3个步骤的示例展示，并且可以通过URL user?step=step-one 的变化显示第N个步骤的...
table表格实现动态合并行(Angular+ng-zorro)
m0_60504233的博客
06-27 1843
根据后端返回的数据，把数据相同的单元格进行合并 ts中：
angular 动态合并单元格
weixin_45010894的博客
06-24 722
angular table动态合并单元格 [attr.colspan]
Angular7 + 按照数据结构，主键相同【动态合并单元格】
Sicily_winner的博客
11-19 691
前言：如果说合并5行则，rowspan为6。 0、原数据 [{"xmZt":"211","sbZt":null,"sbr":null,"xmCj":0,"createDate":1261621391000,"createUser":"郴州市国土资源局","deleteDate":null,"sbSj":1261639630000,"modifyDate":1555460529000,"htG...
Angular 单元格合并
weixin_30314813的博客
04-23 1046
在Angular实现表格输出的话，使用ng-repeat输出信息， 使用了： ng-repeat-startng-repeat-end ng-hide="$first" 1 <tbody> 2 3 <tr data-ng-repeat-start="orderItem in currentPageStores"> 4 &l...
Angular合并单元格
u011585024的博客
03-02 1064
背景 对结果进行展示时，需要对数据相同的列进行合并，具体效果如下： 环境 @Angular/[email protected] [email protected] 操作 先对数据源进行处理 原始数据源数据格式如下： export const students = [ { school: 'hx', grade: 'one', name: 'xm', course: 'math', fraction: '80', average: '80' }, { school: 'hx', grade: 'one.
关于Angular Js动态表格合并单元格的一点见解
mengmengmengxin的博客
03-21 1756
记第一篇笔记~~~~ hell OwO rld ~~~~ 最近公司有一点点小需求，做个另类的表格，要求动态的样式(PS:不能直接写死那种)，没办法打工人只能硬着头皮去干。 网上传的一些写法： controller.js: $scope.test = [ 　　　　 {testName:'aaa',list:[ {testValue1: '1',testValue2:'2',testValue3...
angularjs 合并单元格
weixin_34189116的博客
12-01 334
Html: <table class="table table-striped"> 　　<thead> 　　　　<tr> 　　　　　　<th>国家</th> 　　　　　　<th>价格(EUR)</th> 　　　　　　<th>价格(CNY)</th> 　　　　　　<th...
angular合并相同单元格
最新发布
03-29
在Angular中合并相同单元格需要使用colspan和rowspan属性来实现。这两个属性分别表示列合并和行合并。 例如，要合并一个表格中的两个单元格，可以使用以下代码： ``` 单元格1 合并单元格2和3 单元格4 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

从前是晴天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值