Ionic2集成ngx-datatable,ng2-tree第三方控件.md

• 1. 基本環境配置
  • 1.1. 命令安裝相應的依賴
  • 1.2. 在Module定義中引入對應Module
  • 1.3. 引入對應的CSS
• 2. 簡單使用示例驗證是否集成成功
  • 2.1. ngx-datatable的使用
  • 2.2. ng2-tree的使用

因為Ionic2中沒有DataTable控件，也沒有Tree控件，我們這邊又要求使用Ionic來開發WebPC端的應用，所以就采用集成第三方的方案，最終選擇了ngx-datatable和ng2-tree。

1. 基本環境配置

1.1. 命令安裝相應的依賴

npm i @swimlane/ngx-datatable --save
npm install --save ng2-tree

1.2. 在Module定義中引入對應Module

首先添加import，保證如下依賴的引入：

import { BrowserModule } from '@angular/platform-browser';
import { TreeModule } from 'ng2-tree';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

一般情況BrowserModule都是默認存在的，不需要單獨引入。
然后在@NgModule裝飾器中添加Module引入，保證如下三個Module的存在：

@NgModule({
  ...
  imports: [
    ...
    BrowserModule, 
    TreeModule,
    NgxDatatableModule,
    ...
  ],
  ...
})
export class AppModule { }

1.3. 引入對應的CSS

在src/assets下新建文件夾ngx-datatable和ng2-tree，並復制如下文件：
ngx-datatable下需要的文件：

'{{ROOT}}/node_modules/@swimlane/ngx-datatable/release/themes/*',
'{{ROOT}}/node_modules/@swimlane/ngx-datatable/release/index.css'

ng2-tree下需要的文件：

'{{ROOT}}/node_modules/ng2-tree/styles.css'

並在index.html中增加如下引入：

<link rel="stylesheet" type="text/css" href="assets/ngx-datatable/index.css" />
<link rel="stylesheet" type="text/css" href="assets/ngx-datatable/material.css" />
<link rel="stylesheet" type="text/css" href="assets/ngx-datatable/dark.css" />
<link rel="stylesheet" type="text/css" href="assets/ng2-tree/styles.css" />

2. 簡單使用示例驗證是否集成成功

2.1. ngx-datatable的使用

官方給出的最簡單的實例如下，可以用於驗證是否集成成功

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <div>
      <ngx-datatable
        [rows]="rows"
        [columns]="columns">
      </ngx-datatable>
    </div>
  `
})
export class AppComponent {
  rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
  ];
  columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];
}

詳細的使用參考官方示例，每個實例都可以通多點擊標頭的Source按鈕查看源碼。

2.2. ng2-tree的使用

官方給出的實例如下：

import { TreeModel, NodeEvent } from 'ng2-tree';

@Component({
  selector: 'myComp',
  // 2 - listent for nodeSelected events and handle them
  template: `<tree [tree]="tree" (nodeSelected)="logEvent($event)"></tree>`
})
class MyComponent {
  public tree: TreeModel = { ... };

  // 3 - print caught event to the console
  public logEvent(e: NodeEvent): void {
    console.log(e);
  }
}

其中的TreeModel就是DataModel的定義，如下：

interface TreeModel {
  value: string | RenamableNode;
  children?: Array<TreeModel>;
  loadChildren?: ChildrenLoadingFunction;
  settings?: TreeModelSettings;
}

TreeModel具體數據的示例如下：

{
    value: 'Programming languages by programming paradigm',
    children: [
		{
			value: 'Object-oriented programming',
			children: [
				{value: 'Java'},
				{value: 'C++'},
				{value: 'C#'},
			]
		},
		{
			value: 'Prototype-based programming',
			children: [
				{value: 'JavaScript'},
				{value: 'CoffeeScript'},
				{value: 'Lua'},
			]
		}
	]
}

詳細的使用方式查看官方文檔。