文章分類／Infragistics
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 }; } }