@aabegg/table 中文文档教程

Question

Installation

npm install @aabegg/table

---

TableSettings

TableSettingsService 弄乱了 AppModule eingebunden werden。

import { NgModule } from '@angular/core';
import { TableSettingsService } from '@aabegg/table';

@NgModule({
  declarations: [],
  imports: [],
  providers: [TableSettingsService]
})
export class AppModule { }

Funktionen

• clickhandler (Einstellung für den Context-Clickhandler - click oder contextmenu)
• init(Array)(Setzt die Standard-Werte der Tabellen - Benutzer unabhängig)
• update(Array)(Aktuallisiert die Werte)

Table

Das TableModule muss im AppModule (MainModule) eingebunden werden。

import { NgModule } from '@angular/core';
import { TableModule } from '@aabegg/table';

@NgModule({
  declarations: [],
  imports: [TableModule],
  providers: []
})
export class AppModule { }

Folgende Directiven stehen danach zur Verfügung:

• NgTableFor
• TableFilterSelect
• TableFilterInput
• TableSort
• TableContextComponent

NgTableFor

Die NgTableFor 指令 wird fast identisch angewandt wie die normale ngFor 指令。

<table>
  <tbody>
    <tr *ngTableFor="let employee of (data | async)?.data; rowHeight: itemheight; context: tableContext">
      <td style="width: 50%;">{{employee.name}}</td>
      <td style="width: 50%;">{{employee.firstname}}</td>
    </tr>
  </tbody>
</table>

NgForTable 属性：

• rowHeight (Die ausgewählte Zeilenhöhe - 43, 55, 80)
• context (Die Referenz zum Context-Menu)

TableContext

Der table-context Component ist wie folgt aufgebaut：

<table-context #tableContext>
  <ng-template let-employee="context">

    <button (click)="menuclick(employee)" md-menu-item>
      <md-icon>dialpad</md-icon>
      <span>{{employee.name}} {{employee.firstname}}</span>
    </button>

  </ng-template>
</table-context>

Das active Menu hat immer Zugriff auf die context-Variable。 Diese entspricht immer dem angeklickten 项目。

Sortierung

Für die Sortierung einer Spalte müssen zwei Attribut-Direktiven angewandt werden:

• sortField="name" (Entspricht dem Namen des Feldes in der Datenbank)
• sortTable="demotable" (Entspricht dem Name der zu sortierenden Tabelle)

Diese Direktiven können an ein th-Tag der Überschrift angebracht werden。

示例：

<th sortField="name" sortTable="demotable" i18n="Überschrift Demotabelle">Name</th>

Filterung Input

Für die Filterung einer Spalte müssen zwei Attribut-Direktiven angewandt werden：

• filterInput="name" (Entspricht dem Namen des Feldes in der Datenbank)
• filterTable="demotable" (Entspricht dem Name der zu sortierenden Tabelle)

Diese Direktiven können an ein input angebracht werden。

游戏：

<th><input filterInput="name" filterTable="demotable" type="text"/></th>

Filterung Select

Für die Filterung einer Spalte mit einem Select-Menü，müssen drei Attribut-Direktiven angewandt werden：游戏

• filterSelect="department" (Entspricht dem Namen des Feldes in der Datenbank)
• filterTable="demotable" (Entspricht dem Name der zu sortierenden Tabelle)
• (FilterSaved)="savedDepartment = $event" (Wird ausgelöst wenn ein gefilterter Wert zuvor in den Tabelleneinstellungen gespeichert wurde)

：

<th>
  <md-select filterSelect="department" filterTable="demotable" (filterSaved)="savedDepartment = $event" [ngModel]="savedDepartment">
    <md-option value="" i18n>Alle</md-option>
    <md-option value="Administration" i18n>Administration</md-option>
    <md-option value="Verkauf" i18n>Verkauf</md-option>
    <md-option value="Entwicklung" i18n>Entwicklung</md-option>
  </md-select>
</th>

---

Versionen

1.0.0

• Initiale Version