Angular 4与Bootstrap 4数据表格

Question

Angular 4与Bootstrap 4数据表格

angulardatatablebootstrap-modalbootstrap-4

8

我需要在Angular 4和Bootstrap 4中使用表格，但是官方的Bootstrap 4表格看起来不太好。我找到了这个Git项目：https://www.npmjs.com/package/angular-4-data-table-fix，但找不到任何关于如何使用它的文档。是否有人知道这个项目或类似的项目并可以提供帮助？谢谢。

- Shay

1

你尝试过PrimeNG by Primefaces吗？ https://www.primefaces.org/primeng/#/ - Jay

3个回答

2

对于数据表格，你可能想要列具有排序、筛选、重新排列列顺序和分页等功能。如果是这样，Swimlane的ngx-datatable模块非常不错。我在企业数据目录中使用它，并且可以处理大型数据集而不会出现问题。

ngx-datatable文档链接

- Bv Kay

1

如果您正在寻找一个非常好的动态数据表，您应该考虑使用Angular Material。这是一个个人偏好，但是Material比Bootstrap更漂亮、更实用，在数据方面，它相当容易实现和理解。开箱即用效果非常好。

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

- Joshua Michael Calafell

这是一个很好的使用CRUD操作的示例：https://github.com/marinantonio/angular-mat-table-crud。我希望早些时候就发现了它。 - buzibuzi

我可能同意，但如果我们已经在项目中使用Bootstrap 4，那么Material Table能与Bootstrap 4一起使用吗？ - Hemant Kumar Singh

材料在一般情况下似乎更适合于Angular，正如你所指出的那样，数据方面是一个优胜者。 - skydev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Apostrofix · Accepted Answer

您可以在此处查看代码：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'; // 或者 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 { }