【angular】项目实践-表格显示

介绍

    前端中经常用到的组件就是表格了，下面简单介绍下表格的显示。

HTML文件

<div class="container" style="margin-bottom:10px;width:95%;">
    <div class="row">
        <data-table (deletesEmit)="deleteDatas($event)" (changepage)="changepage($event)" [isCheckBox]="isCheck" [isLink]="isLink"
            [editButton]="btnEdit" [title]="title" [page]="page" [addButton]="btnAdd" [deleteButton]="btnDelete" (editData)="edit($event,mymodal)"
            [importButton]="btnImport" [exportButton]="btnExport" [total]="total" (linkClickEmitData)="linkClick($event,studentBtn)"
            [data]="data" [arr]="arrbutes" [buttonstyle]="btnstyle" [sizeList]="sizeList" [paging]="paging" [pageSize]="pageSize">
        </data-table>
    </div>
</div>

ts文件

// 初始化考场信息表格数据
  btnAdd: boolean = false;
  btnDelete: boolean = true;
  btnEdit = true;
  btnImport: boolean = false;
  btnExport: boolean = false;
  title = ['考场名称', '考试地点', '考试时间', '考生人数', '监考教师', '所属考试'];
  arrbutes = ["examinationRoomName", "classRoomName", "examTime", "arriveCount", "teacherName", "examName"]
  isLink = [true, false, false, false, false, false]
  paging: boolean = true;
  url = '';
  data = new Array();
  total: number;
  pageSize = 10;
  page = 1;
  sizeList = [5, 10, 20, 50];
  isCheck = true;
  btnstyle = [
    { "color": "green" },
    { "color": "red" },
    { "color": "" }
  ]

  // 初始化考场信息表格
  getData(url: string) {
    this.http.get(url).toPromise().then(
      res => {
        if (res.json().code == "0000") {
          //将教学楼名称和教师名称拼成一个表格中的考试地点这个地段
          let nameData = res.json().data.list;
          for (let i = 0; i < nameData.length; i++) {
            nameData[i].classRoomName = nameData[i].buildingName + "-" + nameData[i].classRoomName;
          }
          this.data = nameData;
          this.total = res.json().data.total;
        }
        else {
          this.data = [];
        }
      })
  }

    这仅仅是表格的一个页面初始化显示，如果有问题欢迎指出。