角4与引导程序4数据表

Question

我需要使用角4和引导程序4的表，但引导程序4官方表看起来不太好。 我发现这个混帐项目： https://www.npmjs.com/package/angular-4-data-table-fix

但是找不到任何关于如何使用它的文档。 没有人知道这个项目或类似的，可以帮助吗？

谢谢。

Answer 1

你可以看到这里的代码：https://github.com/ggmod/angular-2-data-table-demo/tree/master/app

基本上，你创建一个新的组件为表，像这样（从上面的例子所）：

import { Component } from '@angular/core'; 
import { DataTableResource } from 'angular-2-data-table'; 
import persons from './data-table-demo1-data'; 


@Component({ 
    selector: 'data-table-demo-1', 
    providers: [], 
    templateUrl: 'app/demo1/data-table-demo1.html', 
    styleUrls: ['app/demo1/data-table-demo1.css'] 
}) 
export class DataTableDemo1 { 

    itemResource = new DataTableResource(persons); 
    items = []; 
    itemCount = 0; 

    constructor() { 
     this.itemResource.count().then(count => this.itemCount = count); 
    } 

    reloadItems(params) { 
     this.itemResource.query(params).then(items => this.items = items); 
    } 

    // special properties: 

    rowClick(rowEvent) { 
     console.log('Clicked: ' + rowEvent.row.item.name); 
    } 

    rowDoubleClick(rowEvent) { 
     alert('Double clicked: ' + rowEvent.row.item.name); 
    } 

    rowTooltip(item) { return item.jobTitle; } 
} 

而且模板HTML文件：

<div style="margin: auto; max-width: 1000px; margin-bottom: 50px;"> 
    <data-table id="persons-grid" 
     headerTitle="Employees" 
     [items]="items" 
     [itemCount]="itemCount" 
     (reload)="reloadItems($event)" 

     (rowClick)="rowClick($event)" 
     (rowDoubleClick)="rowDoubleClick($event)" 
     [rowTooltip]="rowTooltip" 
     > 
     <data-table-column 
      [property]="'name'" 
      [header]="'Name'" 
      [sortable]="true" 
      [resizable]="true"> 
     </data-table-column> 
     <data-table-column 
      [property]="'date'" 
      [header]="'Date'" 
      [sortable]="true"> 
      <template #dataTableCell let-item="item"> 
       <span>{{item.date | date:'yyyy-MM-dd'}}</span> 
      </template> 
     </data-table-column> 
     <data-table-column 
      property="phoneNumber" 
      header="Phone number" 
      width="150px"> 
     </data-table-column> 
     <data-table-column 
      [property]="'jobTitle'" 
      [header]="'Job title'" 
      [visible]="false"> 
     </data-table-column> 
     <data-table-column 
      [property]="'active'" 
      [header]="'Active'" 
      [width]="100" 
      [resizable]="true"> 
      <template #dataTableHeader let-item="item"> 
       <span style="color: rgb(232, 0, 0)">Active</span> 
      </template> 
      <template #dataTableCell let-item="item"> 
       <span style="color: grey"> 
       <span class="glyphicon glyphicon-ok" *ngIf="item.active"></span> 
       <span class="glyphicon glyphicon-remove" *ngIf="!item.active"></span> 
       </span> 
      </template> 
     </data-table-column> 
    </data-table> 
</div> 

当然在您的情况下，数据源和结构可能会不同，所以您需要将此代码调整到您想要的结构。

记得在app.module.ts申报您的组件，然后你可以使用它，让我们说，在app.component.html，比如上例中，其中data-table-demo-1是您的组件具有表：

<div style="padding: 25px"> 
    <data-table-demo-1></data-table-demo-1> 
</div> 

编辑：您也可以导入数据表模块，像这样：

import { DataTableModule } from 'angular-2-data-table'; // or angular-4-data-table

所以那么app.module.ts合作看起来像这样：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

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

import { DataTableModule } from 'angular-4-data-table'; // notice this 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    TableComponent 
    ], 
    imports: [ 
    BrowserModule, 
    DataTableModule // notice this one 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 2

如果你正在寻找一个非常好的动态数据表，你应该看看使用角度材料。这是一个偏好的事情，但Material比Bootstrap更好看，更有用，并且就数据而言，实现和理解起来相当容易。开箱即可使用。

https://material.angular.io/components/table/overview

Answer 3

对于数据表，你可能想要的列有像排序，筛选，重新安排列顺序和分页功能。 如果是这样，swimlane的ngx-datatable模块非常甜美。我将它用于企业数据目录，它可以毫无问题地处理大型数据集。

Link to the ngx-datable documentation