关于ngx-datatable可拉伸表格

官网
https://swimlane.gitbooks.io/ngx-datatable/content/introduction/getting-started.html

http://swimlane.github.io/ngx-datatable/

WX20180112-153854.png

• 安装
  npm install @swimlane/ngx-datatable
• 引入
  module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [NgxDatatableModule, BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

• html

<ngx-datatable #dataTable class="material striped" [messages]="localizationMessage" [rows]="rows" [columnMode]="'force'"
    [headerHeight]="40" [rowHeight]="40" [footerHeight]="40" [externalPaging]="true" [count]="pagination.totalResults" [offset]="pagination.currentPage"
    [limit]="pagination.pageSize" [scrollbarH]="true" [selected]="selectedRows" [selectionType]="'single'" (activate)="onActivate($event)"
    (page)='setPage($event)' [rowIdentity]="getRowIdentity" [reorderable]="true">
    <ngx-datatable-column name="序号" prop="index" [width]="60"></ngx-datatable-column>
    <ngx-datatable-column name="用户名" prop="userName"></ngx-datatable-column>
    <ngx-datatable-column name="地址">  //可跳转
      <ng-template ngx-datatable-cell-template let-row="row">
        <div class="hn-log-info" (click)="presentToast(row?.uri)">{{row?.uri}}</div>
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>

• js

public rows = [];
 public selectedRows = [];
  public pagination: any = {
    "totalResults": 0,
    "currentPage": 0,
    "pageSize": 0
  }
  public localizationMessage = {
    emptyMessage: '未找到任何数据！',
    totalMessage: '条记录',
    selectedMessage: '已选中'
  }
getRowIdentity(rowData) {
    return rowData.index;
  }

  setPage(pageInfo) {
    this.pagination.currentPage = pageInfo.offset;
    this.currentPage = pageInfo.offset;
    this.getLogs();
  }

  transDataToTableData(data) {
    this.pagination = data.pagination;
    let dataRows = [];
    if (data.xx) {
      data.xx.forEach((item,index) => {
        dataRows.push({
          index: index+1 + this.pagination.pageSize*this.pagination.currentPage,
          userName: item.userName,
  
          uri: item.uri,
        });
      });
    }
    this.rows = dataRows;
  }
  onSelect(info) {
  }

  onActivate(info) {

  }
  onToggleSideMenu(status: any) {
    this.rows = [...this.rows];
  }

-接口调用

if (res&& res.data) {
    this.transDataToTableData( res["data"] );
 }