最佳Angular 2数据网格：FlexGrid

• 下载 Wijmo 5

市面上有许多 JavaScript 数据网格：开源的、第三方的、自研的。Wijmo 的 FlexGrid 是目前最适合 Angular 2 的数据网格。

Angular 2 数据网格基础：小巧、快速、熟悉

要拥有一个优秀的 Angular 2 网格，首先必须掌握数据网格的基本要素。FlexGrid 最早于 1996 年使用 C++ 为 Visual Basic 编写（甚至作为 Visual Studio 的一部分发布）。自那时起，它不断发展，并在许多平台中得到完善，最新版本是 JavaScript。FlexGrid 的名称来源于我们的 Flex 理念：控件应仅包含所需的核心功能集，并通过可扩展模型提供所有其他功能。排序、分组和编辑等功能是内置的，而其他花哨功能则作为 FlexGrid 的可选扩展提供。这使得控件小巧而快速，并使我们和我们的客户都能够构建自定义功能。

试用 Wijmo 5 和 FlexGrid

另一个关键特性是性能。FlexGrid 不断地与其他网格进行基准测试，以确保我们保持快速。Flex 理念使我们能够保持文件大小非常小（约 25K Gzipped），并且我们对其他库没有零依赖。最重要的性能改进是通过虚拟渲染。FlexGrid 虚拟化所有 DOM，只渲染填充视口所需的单元格（并额外提供一些缓冲区以实现平滑滚动）。随着网格滚动，单元格（DOM 元素）会被回收。虚拟渲染意味着网格可以在不到一秒的时间内绑定到数百万条记录。

最后，最重要的功能之一是熟悉度。FlexGrid 几乎所有交互行为都基于 Excel，这可能是任何最终用户最常用的网格/表格。人们在滚动、点击以及尤其是使用按键命令（包括剪贴板功能）时，都会期望某些行为。我们没有发明自己的行为，而是模仿 Excel 的行为，最终用户会立即感到使用我们的网格很舒适。令人惊讶的是，许多其他网格要么发明自己的行为，要么不完全支持键盘操作或滚动。例如，如果您在网格中选择一行并按住向下箭头键，许多网格都不会按您期望的方式运行。

在标记中声明 UI 控件

现在，让我们来谈谈 FlexGrid 在 Angular 方面的一些特定优势。FlexGrid 在 Angular 中最大的优势是其标记：Angular 组件使我们能够在标记中声明 UI 控件。声明性标记非常适合遵循 MVVM 设计模式，我们可以完全在视图（标记）中配置我们的组件。

当然，前提是您的组件支持它。

FlexGrid 支持使用 Angular 标记声明其整个 API。您可以完全在标记中设置属性、附加事件、配置子组件（如列）。以下是 FlexGrid 在 Angular 2 标记中如何配置的示例

<wj-flex-grid [itemsSource]="data">
    <wj-flex-grid-column [header]="'Country'" 
    [binding]="'country'" [width]="'*'"></wj-flex-grid-column>
    <wj-flex-grid-column [header]="'Date'" 
    [binding]="'date'"></wj-flex-grid-column>
    <wj-flex-grid-column [header]="'Revenue'" 
    [binding]="'amount'" [format]="'n0'"></wj-flex-grid-column>
    <wj-flex-grid-column [header]="'Active'" 
    [binding]="'active'"></wj-flex-grid-column>
</wj-flex-grid>

这是我们声明性标记的结果

许多其他网格组件只提供在标记中声明控件的能力，强制所有配置都在 JavaScript (ViewModel) 中完成。这混淆了视图和视图模型之间的界限，并迫使设计人员进入 JavaScript 来更改 UI 控件。这样做时，您也错过了标记中 Angular 绑定的所有好处。我们认为这种做法是一种反模式。看看区别。

<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;"
    // items bound to properties on the controller
    [gridOptions]="gridOptions"
    [columnDefs]="columnDefs">
</ag-grid-ng2>

通过使用完全支持声明性标记的组件，您可以获得真正的 MVVM 支持，并且可以像在其他开发平台（ASP.NET、Java、Silverlight、Flex）中一样构建应用程序。

声明可重用单元格类型模板

除了在标记中声明 FlexGrid 的任何成员外，我们还提供单元格模板。单元格模板是一种为不同类型的单元格声明可重用模板的方法。单元格模板支持任何有效的 Angular 标记，包括绑定表达式、html 和其他组件。不同类型的单元格模板包括：标题单元格、编辑模式下的单元格、正常模式下的单元格等。

通过提供单元格模板，FlexGrid 为您提供了一种富有表现力的方式来创建组件。您不仅可以在标记中利用 FlexGrid 的 API，还可以在每个单元格中利用所有 Angular 的语法。

看看 FlexGrid 单元格模板标记有多强大

<wj-flex-grid [itemsSource]="data1"
                    [allowSorting]="false"
                    [deferResizing]="true">
    <template wjFlexGridCellTemplate [cellType]="'TopLeft'" 
    *ngIf="customTopLeft">
        ?
    </template>
    <template wjFlexGridCellTemplate [cellType]="'RowHeader'" 
    *ngIf="customRowHeader" #cell="cell">
        { {cell.row.index}}
    </template>
    <wj-flex-grid-column header="Country"
                            binding="country"
                            width="*">
        <template wjFlexGridCellTemplate [cellType]="'Cell'" 
        *ngIf="customCell" #item="item">
            <img src="resources/{ {item.country}}.png" />
            { {item.country}}
        </template>
        <template wjFlexGridCellTemplate [cellType]="'GroupHeader'" 
        *ngIf="customGroupHeader" #item="item" #cell="cell">
            <input type="checkbox" [(ngModel)]="cell.row.isCollapsed" />
            { {item.name}} ({ {item.items.length}} items)
        </template>
    </wj-flex-grid-column>
    <wj-flex-grid-column header="Downloads"
                            binding="downloads"
                            [width]="170"
                            [aggregate]="'Sum'">
        <template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" 
        *ngIf="customColumnHeader">
            <input type="checkbox" 
            [(ngModel)]="uiCtx.highlightDownloads" />
            Downloads
        </template>
        <template wjFlexGridCellTemplate [cellType]="'Cell'" 
        *ngIf="customCell" #item="item">
            <span [ngStyle]="{color: uiCtx.highlightDownloads? 
            (item.downloads>10000 ?'green':'red'):''}"
                    style="font-weight:700">
                { {item.downloads}}
            </span>
        </template>
        <template wjFlexGridCellTemplate [cellType]="'Group'" 
        *ngIf="customGroup" #cell="cell">
            Sum = { {cell.value | number:'1.0-0'}}
        </template>
    </wj-flex-grid-column>
</wj-flex-grid>

这是我们声明性单元格模板的结果

同样，要使用任何其他网格实现这一点，您需要进入 JavaScript 并在 ViewModel 中编写它。

使用绑定自动更新控件

我相信 Angular 最有成效的优势是绑定表达式，它允许我们创建能够自动响应数据变化的 UI，从而省去了编写过多的事件处理程序和 DOM 操作。

FlexGrid 支持其所有属性的绑定。除此之外，我们还为所有能够从中受益的属性提供双向绑定。无需编写任何代码，您就可以绑定组件以处理事件并将更改传播到模型和从模型传播。

绑定是任何开发平台（Java、.NET）中的一等公民。Angular 使其变得非常容易，并且对单向和双向绑定的支持至关重要。

TypeScript：Angular 2 的自然之选

最后但同样重要的是，FlexGrid 和所有 Wijmo 都是用 TypeScript 编写的。我们有在微软平台工作的悠久历史，所以当 TypeScript 出现时，我们感到非常适应。TypeScript 为我们提供了与 C# 相媲美的开发体验：我们获得了类、继承、强类型、类型检查、构建时错误检查等等。它一直是我们创建企业级 JavaScript 控件的催化剂，就像我们在其他平台所做的那样，而且我们无需在 API 或语法上做出任何妥协。

也许最重要的是，TypeScript 使我们能够创建“真正的控件”（作为类），而不是像几乎所有其他组件那样的小部件（作为函数）。FlexGrid 是派生自我们基础控件类的类。小部件强制您使用笨拙的函数来设置属性和传递值，而 FlexGrid 具有带有 getter 和 setter 的属性，因此您可以直接分配它们。Wijmo 还具有一个事件模型，可以轻松添加处理程序。

选择在 TypeScript 中工作的最终用户（现在许多 Angular 2 用户都会这样做）也受益于我们的控件：如果他们尝试将不正确的类型分配给属性，他们会获得支持 IntelliSense（或自动完成）代码的 IDE 中的 IntelliSense（或自动完成）代码、警告和有用的错误消息。

TypeScript 最强大的功能是我们的客户可以继承和扩展我们的控件。这符合我们的 Flex 理念，简化了控件的定制并减少了错误。

最后，我们与 Angular 2 目前的方向保持一致。几年前我们做出的一个决定得到了 Google 团队的认可——采用了微软的语言，这真令人惊讶！我们的控件类已经用 TypeScript 编写，因此它们与 Angular 2 天然契合。我们只需扩展它们并添加元数据装饰器即可将它们作为 Angular 2 组件公开。

别光听我说：亲身尝试一下

“我们购买了 Wijmo，他们的团队做得非常出色：美观、精心设计的架构；文档；以及在不断变化的格局中保持领先，无人能及。”——BJ Jeong，思科

如果我的话没能说服您，我鼓励您尝试 FlexGrid，并证明我是对是错。如果我们错了，FlexGrid 被其他网格超越了，我们想知道。我们从未停止对网格的改进和完善，已经坚持了 20 年，并且短期内也不会停止。

• 下载 Wijmo 5