65.9K
CodeProject 正在变化。 阅读更多。
Home

为您的 Angular 应用程序添加加速数据网格

Robert_Dyball
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2020年2月6日

CPOL
viewsIcon

3472

本文探讨了需要以网格形式显示数据的企业 Web 应用程序的开发人员如何使用 Wijmo FlexGrid，这是一个成熟且完全支持的数据网格。

需要以网格形式显示数据的企业 Web 应用程序的开发人员面临两难。您是使用简单的 HTML 表格，它们简单易于构建，但陈旧且功能单一（尤其是当您知道用户会将它们与 Google 表格进行比较时）？还是您再次尝试寻找那个难以捉摸的、免费的、开源的（但可靠的）数据网格工具，它将为您提供所需的性能、功能和支持？哦，而且页面膨胀始终是个问题……

隆重推出 Wijmo FlexGrid，一个成熟且完全支持的数据网格。它已经问世五年多了，并且在第 5 版中，它功能丰富、速度极快，并且代码占用空间小。

FlexGrid 具有 Angular 包装器，可简化创建所需 Angular 组件的工作，并支持从 Angular 2 到 Angular 9 的所有版本。在本教程中，我们将使用 Angular 8。

将 Wijmo FlexGrid 与 Angular 8 结合使用

为了了解在 Angular 8 应用程序中使用 Wijmo FlexGrid 表格有多么容易，我们将从一个包含数据绑定 HTML 表格的简单 Angular 组件开始。一旦基本版本正常工作，我们将修改代码并切换到 Wijmo FlexGrid。

假设已安装 node.js，请使用 Node 包管理器 (npm) 使用 angular.io 本地设置创建一个 Angular 8 应用程序。打开命令外壳/终端并键入

npm install -g @angular/cli
ng new my-app

选择默认设置：路由选择 N，样式表类型选择 CSS，然后键入

cd my-app
ng serve --open

很快，该应用程序应在您的默认浏览器中通过 https://:4200/ 可见

现在返回命令提示符，通过按 Ctrl-C 退出 ng serve。我们将使用 Angular CLI（命令行界面）创建一个简单的 Angular 组件，并将数据绑定到一个普通的 HTML 表格。在提示符处键入

ng generate component MyDataGrid
code .
ng serve

第一行创建我们的新组件，第二行打开 Visual Studio Code 来编辑当前目录中的文件。（您也可以使用其他编辑器，如果您愿意。）此处我们不需要 --open 参数；假定您仍然打开着浏览器。

由于 ng serve 在编辑器中保存每次更改后都会自动重新构建应用程序并刷新浏览器，因此我们将继续编辑和保存，并随时查看结果。

接下来，我们将清理应用程序的 app.component.html 页面中的一些“多余代码”，以便更容易看到新组件。所以，删除该页面上从下面显示的行开始（包括该行）的所有内容（在 Angular 版本 8.2.14 中为第 329 行）

<div class="content" role="main">

并用以下内容替换所有内容

<app-my-data-grid></app-my-data-grid>

这是代码末尾的一段，显示更改后的最后几行

保存更改后，您的浏览器应该会刷新，因为 ng serve 会重新构建，您应该会看到新组件。虽然目前有点不尽如人意，但我们至少现在可以知道它正在工作

接下来，我们将更新新组件，添加数据源，并使用常规数据绑定和 Angular HTTPClientModule 将其链接到我们视图中的简单 HTML 表格。首先，编辑 app.module.ts 文件以添加下面显示的导入引用，然后将以下内容添加到现有的导入语句中

import { HttpClientModule } from '@angular/common/http';

现在，在模块导入集合中添加一个引用。请注意，引用已指向我们的新组件。这些是由 Angular CLI 在创建组件时自动添加的。

最终代码应为

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  

import { AppComponent } from './app.component';  
import { MyDataGridComponent } from './my-data-grid/my-data-grid.component';  
import { HttpClientModule } from '@angular/common/http';  

@NgModule({  
  declarations: [  
    AppComponent,  
    MyDataGridComponent  
  ],  
  imports: [  
    BrowserModule,  
    HttpClientModule  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

接下来，转到 src/app/my-data-grid 文件夹并打开 my-data-grid.component.ts。这是我们将添加数据源的地方。在其他导入旁边添加对 HttpClient 的引用

import { HttpClient } from '@angular/common/http';

并替换默认的构造函数

constructor() { }

为以下内容：

  data: any;  

  constructor(private http: HttpClient) {  
    this .http.get('https://data.gov.au/geoserver/ballarat-community-food-activities/wfs?request=GetFeature&typeName=ckan_70374622_81eb_4e84_ac43_587e4a4b8121&outputFormat=json')  
      .subscribe(data => {  
        this.data = data;  
      });  
  }

最终代码应该是这样的：

import { Component, OnInit } from '@angular/core';  
import { HttpClient } from '@angular/common/http';  

@Component({  
  selector: 'app-my-data-grid',  
  templateUrl: './my-data-grid.component.html',  
  styleUrls: ['./my-data-grid.component.css']  
})  
export class MyDataGridComponent implements OnInit {  

  data: any;  

  constructor(private http: HttpClient) {  
    this .http.get('https://data.gov.au/geoserver/ballarat-community-food-activities/wfs?request=GetFeature&typeName=ckan_70374622_81eb_4e84_ac43_587e4a4b8121&outputFormat=json')  
      .subscribe(data => {  
        this.data = data;  
      });  
  }  

  ngOnInit() {  
  }  
}

保存文件。您的浏览器应该会刷新，尽管目前还没有可见的更改。您可以使用 F12 浏览器调试器查看网络流量，并应看到对刚添加的 JSON 数据发出的请求

接下来，打开 my-data-grid.component.html 文件以设置 JSON 管道来简要分析我们的数据。

在现有行之后添加以下 Angular 调试代码

<pre>{{ data | json }}</pre>

保存文件并切换到您的浏览器，您现在将看到 JSON 数据的结构

现在，替换（或注释掉）下面显示的用于我们基本 Angular 8 数据驱动 HTML 表格的 Angular 调试代码

<p>my-data-grid works!</p>  

<table>  
    <tr>  
      <th>Type</th>  
      <th>Name</th>  
      <th>Address</th>  
    </tr>  
    <tr *ngFor="let item of data.features">  
      <td>{{item.properties.type}}</td>  
      <td>{{item.properties.name}}</td>  
      <td>{{item.properties.address}}</td>  
    </tr>  
  </table>

保存您的工作后，浏览器将刷新并显示以下内容

对于只有少量行数据的简单数据，Angular 8 确实可以简化工作。不幸的是，当您开始尝试添加其他功能时，例如排序、搜索、分组或过滤，您的工作将很快变得乏味。

我们为项目使用了一个小型简单数据样本。对于实际情况，通常涉及的行数会更多（例如，旧金山的食品卡车位置，3000 行 JSON 数据，我们需要添加分页才能使其易于理解。除了可用性问题，太多的数据行会使我们的简单 HTML 表格以及相关的 Angular 代码（当我们添加排序、过滤等时）变得如此庞大，以至于浏览器会变得缓慢，甚至可能崩溃。

让我们看看在我们将基本 HTML 表格切换到 Wijmo FlexGrid 时，如何轻松地将我们的应用程序从这些问题中解救出来。按 Ctrl-C 返回命令外壳，然后键入

npm install @grapecity/wijmo.angular2.all  
ng serve

使用 npm 安装 Wijmo 库，然后重新运行 ng serve。我们将再次编辑 app.module.ts，这次是为了添加对 Wijmo 库的引用。将这些行插入到之前添加的 HttpClientModule 导入附近

import { WjGridModule } from '@grapecity/wijmo.angular2.grid';  
import { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter';

接下来，将以下行添加到模块导入部分。注意在每个条目之间添加逗号

    WjGridModule,  
    WjGridFilterModule

这是此步骤的完整代码

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  

import { AppComponent } from './app.component';  
import { MyDataGridComponent } from './my-data-grid/my-data-grid.component';  
import { HttpClientModule } from '@angular/common/http';  
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';  
import { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter';  

@NgModule({  
  declarations: [  
    AppComponent,  
    MyDataGridComponent  
  ],  
  imports: [  
    BrowserModule,  
    HttpClientModule,  
    WjGridModule,  
    WjGridFilterModule  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

让我们在 styles.css 文件中添加一些 CSS，以使我们的新数据网格脱颖而出。请注意，您可以根据需要轻松更改网格的默认字体以及宽度和高度

/* You can add global styles to this file, and also import other style files */  
@import "@grapecity/wijmo.styles/themes/wijmo.theme.material.css";  

body {  
  font-family: Lato, Arial, Helvetica;  
}  
.wj-flexgrid { /* limit the grid's width and height */  
  max-height: 300px;  
  max-width: 100%;  
}

现在，我们准备更新我们的组件以使用 FlexGrid。首先，在 my-data-grid.component.ts 文件中，我们在之前添加数据源的地方，添加以下内容来导入 Wijmo 库

import * as WjCore from '@grapecity/wijmo';

然后更新之前添加的代码。我们将重新定义我们的数据类型，因为我们将填充 Wijmo 数据集合。我们还将简化一点数据绑定，并在将特征属性传递给视图之前从数据源中选择它。

这是将更新 my-data-grid.component.ts 的代码

  data = new WjCore.CollectionView([], {  
    // add groupDescriptions here  
  });  

  constructor(private http: HttpClient) {  
    this .http.get('https://data.gov.au/geoserver/ballarat-community-food-activities/wfs?request=GetFeature&typeName=ckan_70374622_81eb_4e84_ac43_587e4a4b8121&outputFormat=json')  
      .subscribe(data => {  
        this.data.sourceCollection = data["features"];  
      });  
  }

此步骤的完整代码如下所示

import { Component, OnInit } from '@angular/core';  
import { HttpClient } from '@angular/common/http';  
import * as WjCore from '@grapecity/wijmo';  

@Component({  
  selector: 'app-my-data-grid',  
  templateUrl: './my-data-grid.component.html',  
  styleUrls: ['./my-data-grid.component.css']  
})  
export class MyDataGridComponent implements OnInit {  

  data = new WjCore.CollectionView([], {  
    // add groupDescriptions here  
  });  

  constructor(private http: HttpClient) {  
    this .http.get('https://data.gov.au/geoserver/ballarat-community-food-activities/wfs?request=GetFeature&typeName=ckan_70374622_81eb_4e84_ac43_587e4a4b8121&outputFormat=json')  
      .subscribe(data => {  
        this.data.sourceCollection = data["features"];  
      });  
  }  

  ngOnInit() {  
  }  
}

接下来，编辑 my-data-grid.component.html 文件以更新视图

<p>my-data-grid works!</p>  

 <!-- define the grid -->  
<wj-flex-grid  
  [allowResizing]="'None'"  
  [alternatingRowStep]=0  
  [isReadOnly]="true"  
  [selectionMode]="'ListBox'"  
  [headersVisibility]="'Column'"  
  [itemsSource]="data">  

  <!-- define the columns -->  
  <wj-flex-grid-column [binding]="'properties.type'" [header]="'Type'" [width]="'*'">  
    </wj-flex-grid-column>  
  <wj-flex-grid-column [binding]="'properties.name'" [header]="'Name'" [width]="'*'">  
    </wj-flex-grid-column>  
  <wj-flex-grid-column [binding]="'properties.address'" [header]="'Address'" [width]="'*'">  
    </wj-flex-grid-column>  
</wj-flex-grid>

保存您的工作，然后检查您的浏览器，瞧，您应该看到 FlexGrid 正在运行

请注意，您可能会看到水印。一旦您购买并注册了 Wijmo 工具，此水印就会被移除。
该产品内置了许多核心功能，包括排序。尝试一下 — 只需单击列标题，然后再次单击以反向排序。分组也是一个简单的更改；只需更改 my-data-grid.component.ts 文件中读取此内容的行

// add groupDescriptions here

改为这样。

groupDescriptions: ['properties.type']

以指示您需要的组。现在保存文件。您的浏览器将刷新以显示按您选择的列分组。

截图显示了此分组的运行情况，以及一些“折叠”起来的组。还可以看到另一个开箱即用的功能，即行高亮显示。FlexGrid 具有相当高级的单行和多行以及列选择器，包括 Shift+单击和 Ctrl+单击选择器。

突出显示交替行同样容易 — 只需将 HTML 视图 my-data-grid.component.html 文件中的值从 0 更改为 1

[alternatingRowStep]=1

从头开始构建单元格编辑可能会耗尽任何人的耐心，但在 FlexGrid 上不会。只需将 <wj-flex-grid> 中的 isReadOnly 属性从 true 切换到 false，然后通过按 F2 即可编辑 **任何** 单元格，就像在 Excel 中一样。

启用后，编辑将适用于整个网格。要防止编辑，例如 ID 列，只需将以下内容添加到您想再次设为只读的列的属性列表中

[isReadOnly]="true"

至此，您应该清楚地了解将 Angular 应用程序从使用基本数据绑定 HTML 表格转换为使用 Wijmo FlexGrid 有多么简单和容易。添加分页和过滤同样容易，虽然这确实不需要太多代码，但空间限制不允许详细介绍这些功能。

请遵循此 链接添加分页（客户端或服务器端），以及此 链接添加过滤。

这里的 文档涵盖了这些以及 Wijmo FlexGrid 为 Angular 应用的企业开发人员提供的许多其他出色功能。

无需大量代码，我们就为应用程序添加了一个惊人的交互式表格。它包含了用户期望在现代 Web 应用中看到的所有功能，甚至更多。请记住，当您购买 Wijmo FlexGrid 许可证时，您还可以使用其他出色的 Wijmo 组件。

与自制数据网格或其他解决方案不同，Wijmo FlexGrid 在处理大型数据集时也不会崩溃。

查看 基准测试，了解 Wijmo FlexGrid 的性能有多好。

了解更多关于 Wijmo/FlexGrid 的功能

  1. Bernardo de Castilho 展示了如何在一分钟内创建一个可自定义的 JavaScript 数据网格。还链接了 Angular、React 和 Vue 的版本。
  2. GrapeCity 的全球产品经理 Chris Bannon 将逐步介绍 FlexGrid 5 版中新引入的多范围选择模式的实现。
© . All rights reserved.