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'},
			]
		}
	]
}

详细的使用方式查看官方文档。