Question

基本上我写了一个带有可调整大小的列的表作为一个角度组件，它可以作为一个没有外部CSS的独立组件工作。

但是我将它移动到我使用基本模板制作的项目中： https://github.com/akveo/ngx-admin

我搬到这里之后，在ngOnInit中定义的宽度不均匀地扩散，当我试图移动它们时，它们有些不动。

正如我所说，这个表在我自己的vanilla角度应用程序上运行得非常好，但是当我将它移动到ngx-admin时，一旦添加了数据就会混乱。

图片（之前）：

图片（后）：

HTML：

<div class='container'>
<table #table>
  <tr>
    <th *ngFor="let column of columns; let i = index" [ngClass]="'col-header'" [attr.id]="'col-header-' + i">
      <button>
        <mat-icon (mousedown)="clicked($event)" class="icon">compare_arrows</mat-icon>
      </button>
      <div (overflow)="overflow()">
        {{ column.title }}
      </div>
    </th>
    <th id="col-header-actions" *ngIf="actionModules.length !== 0" [colSpan]="actionModules.length" class="col-header">
      {{ settings.actions.columnTitle }}
    </th>
  </tr>
  <tr *ngFor="let datum of dataShowing">
    <td *ngFor="let column of columns; let i = index" [ngClass]="'col-' + i">
        <div (overflow)="overflow()" [ngClass]="'col-div-' + i">
          {{ datum[column.name] }}
        </div>
    </td>
    <td *ngIf="settings.actions.edit">
      <button class="action-icon">
        <mat-icon (mousedown)="edit(datum)" class="icon">mode_edit</mat-icon>
      </button>
    </td>
    <td *ngIf="settings.actions.delete">
      <button class="action-icon">
        <mat-icon (mousedown)="delete(datum)" class="icon">delete</mat-icon>
      </button>
    </td>
  </tr>
  <tr *ngIf="!hasData">  
    <td [colSpan]="columns.length + 1" >
      <div id="no-data">
        No Data
      </div>
    </td>
  </tr>
</table>
</div>

CSS：

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #e2e2e2a6;
    text-align: left;
    padding: 10px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}

td {
    height: 1.25em;
}


tr {
    padding: 5px;
    &:nth-child(odd) {
        background-color: #ffffff;
    }  
    &:nth-child(even) {
        background-color: #f5f5f5;
    }  
    &:not(:nth-child(1)):hover {
        background-color: #eaf5ff;
    }
}

th button{
    float: right;
    background-color: #ffffff;
}


button{
    z-index: 1;
    position: relative;
    display: block;
    background: transparent;
    border: none;
    &:hover {
        border: none;
    }
    &:action {
        border: none;
    }
}

th div {
    position: absolute;
    height: 1em;
    overflow: hidden;
    word-break: break-all;
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translateY(30%);
}


td div {
    position: absolute;    
    height: 1em;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    top: 0.5em;
    width: auto;
    transform: translateY(30%);
}

mat-icon {    
    color: #b9dfff;
}


.container {
    width: 100%;
    height: 800px;
}

#no-data {
    width: 100%;
}

.action-icon {
    float: none;
    margin: auto;
}

#col-header-actions {
    text-align: center;
}

TS：

import { Component, OnInit, Input, ElementRef, Renderer, ViewChild, HostListener} from '@angular/core';
import { AfterViewInit, DoCheck } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'smart-tabl',
  templateUrl: './smart-tabl.component.html',
  styleUrls: ['./smart-tabl.component.scss']
})
export class SmartTablComponent implements OnInit, AfterViewInit, DoCheck {
  @Input() settings: any;
  @Input() data: any;
  columns: any;
  dataShowing: any;
  @ViewChild('table') table: ElementRef;
  lastMouseX: number;
  lastMouseY: number;
  curDragX: number;
  curDragY: number;
  dragging: boolean;
  originalColumnWidth: number;
  adjacentColumnWidth: number;
  adjacentColumn: any;
  column: any;
  hasData: boolean;
  actionModules: any;


  constructor(private el:ElementRef) {
   }

  ngOnInit() {
    this. actionModules = [];
    let settings = this.settings;
    let columns = [];
    Object.keys(settings.columns).forEach((key) => {
      settings.columns[key].name = key;
      columns.push(settings.columns[key]);
    });
    this.columns = columns;
    this.hasData = (this.columns.length !== 0);
    this.dataShowing = this.data;
    if (!this.settings.actions.hasOwnProperty('delete')) {
      this.settings.actions.delete = true;
      this.actionModules.push("delete");
    }
    if (!this.settings.actions.hasOwnProperty('edit')) {
      this.settings.actions.edit = true;
      this.actionModules.push("edit");
    }
  }

  ngAfterViewInit() {
    let headers: any = document.querySelectorAll(".col-header");
    for (let i = 0; i < headers.length; i++) {
      if (headers[i].attributes.id.nodeValue === "col-header-actions") {
        headers[i].style.width = (this.actionModules.length * 5) + "%";
      } else {
        headers[i].style.width = ((100 - (this.actionModules.length * 5))/(this.columns.length))+"%";
        let divs: any = document.querySelectorAll(".col-div-" + i);
        for (let j = 0; j < divs.length; j++) {
          divs[j].style.width = ((headers[i].clientWidth)*0.9) + "px";
        }
      }
    }
  }

  ngDoCheck() {
    if (this.data.length === 0){
      this.hasData = false;
    } else {
      this.hasData = true;
    }
  }

  @HostListener('mouseup') released(event) {
    this.dragging = false;
  }

  add(item) {
    this.data.push(item);
  }

  clicked(event) {
    this.lastMouseX = event.clientX;
    this.lastMouseY = event.clientY;
    this.dragging = true;
    this.column = event.target.parentNode.parentNode;
    this.originalColumnWidth = parseInt(this.column.style.width, 10);
    let id = this.column.attributes.id.nodeValue;
    let idNum = parseInt(id[id.length - 1]) + 1
    let query = "col-header-" + (idNum)

    if (idNum === this.columns.length) {
      query = "col-header-actions";
    }
    this.adjacentColumn = document.getElementById(query);
    this.adjacentColumnWidth = parseInt(this.adjacentColumn.style.width, 10);
  }

  @HostListener('mousemove', ['$event']) mouseMoved(event) {
    this.curDragX = event.clientX;
    this.curDragY = event.clientY;
    let percentageChange = ((this.lastMouseX-this.curDragX)/parseInt(this.table.nativeElement.clientWidth, 10))*100;
    if (this.dragging &&
      this.originalColumnWidth - (percentageChange) > 6 &&
      this.originalColumnWidth - (percentageChange) < 100 &&
      this.adjacentColumnWidth + (percentageChange) > 6 &&
      this.adjacentColumnWidth + (percentageChange) < 100 ) {

      this.column.lastElementChild.style.width =  ((this.column.clientWidth - this.column.firstElementChild.clientWidth)*0.8) + "px";

      this.column.style.width = (this.originalColumnWidth - (percentageChange) + "%");

      let id = this.column.attributes.id.nodeValue;
      //change adjacent columns
      this.adjacentColumn.style.width = (this.adjacentColumnWidth + (percentageChange) + "%");
      let adjacentId = this.adjacentColumn.attributes.id.nodeValue;
      let adjDivs: any = document.querySelectorAll(".col-div-" + adjacentId[adjacentId.length - 1]);
      for (let i = 0; i < adjDivs.length; ++i) {
        adjDivs[i].style.width = (this.adjacentColumn.clientWidth) + "px";
      }

      //change inner div sizing

      let divs: any = document.querySelectorAll(".col-div-" + id[id.length - 1]);
      for (let i = 0; i < divs.length; ++i) {
        divs[i].style.width = (this.column.clientWidth) + "px";
      }
    }
  } 
  filter() {
    this.dataShowing = this.data;
  }

  edit(item) {
    console.log(item);
  }

  delete(item) {
    const index = this.data.indexOf(item);
    this.data.splice(index, 1);
    console.log(this.data.length);
  }
}

Answer 1

事实证明，ngx-admin已经拥有了col-（列号）的css，而且它正在弄乱，所以我改变了我的命名，它运行良好。

表列在添加数据时意外调整大小

1 个答案: