Infragistics｜Ignite UI for jQuery｜如何將 Ignite UI 用於 jQuery Angular 包裝器

Ignite UI for jQuery 是一個基於 jQuery 的庫，但提供了專門針對 Angular 的包裝器。

jQuery Angular 包裝器的 Ignite UI https://github.com/IgniteUI/igniteui-angular-wrappers

npm i igniteui-angular-wrappers

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { IgniteUIModule } from 'igniteui-angular-wrappers';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
...

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    IgniteUIModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

設置 igGrid

<ig-grid [widgetId]=“gridId” [(options)]=“gridOptions”></ig-grid>

export class GridComponent implements OnInit {
  gridId = 'grid1';
  gridData = [
    { 'ProductID': 1, 'Name': 'Adjustable Race', 'ProductNumber': 'AR-5381', 'Category': { 'ID': 0, 'Name': 'Food', 'Active': true, 'Date': '/Date(1059660800000)/' } },
    { 'ProductID': 2, 'Name': 'Bearing Ball', 'ProductNumber': 'BA-8327', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': true, 'Date': '/Date(1159660800000)/' } },
    { 'ProductID': 3, 'Name': 'BB Ball Bearing', 'ProductNumber': 'BE-2349', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': true, 'Date': '/Date(1259660800000)/' } },
    { 'ProductID': 4, 'Name': 'Headset Ball Bearings', 'ProductNumber': 'BE-2908', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': true, 'Date': '/Date(1359660800000)/' } },
    { 'ProductID': 316, 'Name': 'Blade', 'ProductNumber': 'BL-2036', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': false, 'Date': '/Date(1459660800000)/' } },
    { 'ProductID': 317, 'Name': 'LL Crankarm', 'ProductNumber': 'CA-5965', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': false, 'Date': '/Date(1559660800000)/' } },
    { 'ProductID': 318, 'Name': 'ML Crankarm', 'ProductNumber': 'CA-6738', 'Category': { 'ID': 1, 'Name': 'Beverages', 'Active': false, 'Date': '/Date(1659660800000)/' } },
    { 'ProductID': 319, 'Name': 'HL Crankarm', 'ProductNumber': 'CA-7457', 'Category': { 'ID': 2, 'Name': 'Electronics', 'Active': false, 'Date': '/Date(1759660800000)/' } },
    { 'ProductID': 320, 'Name': 'Chainring Bolts', 'ProductNumber': 'CB-2903', 'Category': { 'ID': 2, 'Name': 'Electronics', 'Active': false, 'Date': '/Date(1859660800000)/' } }
  ];
  gridOptions: IgGrid;

  constructor() { }

  ngOnInit() {
    this.gridOptions = {
      autoGenerateColumns: false,
      columns: [
        { headerText: 'Product ID', key: 'ProductID', dataType: 'number' },
        { headerText: 'Product Name', key: 'Name', dataType: 'string' },
        { headerText: 'Product Number', key: 'ProductNumber', dataType: 'string' }
      ],
      dataSource: this.gridData,
      width: '900px',
    };
  }
}

設置 igTextEditor 和 igNumericEditor

export class EditorsComponent implements OnInit {
  textEditorId = 'texteditor1';
  textEditorOptions: IgTextEditor;
  numericEditorId = 'numericeditor1';
  numericEditorOptions: IgNumericEditor;

  constructor() { }

  ngOnInit() {
    this.textEditorOptions = {
      placeHolder: 'text input'
    };
    this.numericEditorOptions = {
      minValue: 0,
      maxValue: 1000
    };
  }
}