极致好的Angular2表格控件

如今市面上发生恢宏的JavaScript数据表格控件,包括开源的老三正值的以及自下自销的。可以说Wijmo的Flexgrid是现阶段适应Angular
2的极度好的表控件。

Angular 2数据表格基本要求: 更小、更快、更熟悉。

 图片 1

为以Angular
2表格,首先你得了解表格的基本要求。FlexGrid开始吃1996年,当时使C++为Visual
Basic编写的控件。多年来,它不止前行并当多独平台获得圆满,尤其是JavaScript平台。FlexGrid
因为Flex的见识要命名,控件应当包含最要的显要意义集聚和而扩大的力量。内置的基本功能比如:排序、分组、编辑,同时其他比较花哨的物可经可摘的扩充来提供。这将会见维持控件的简洁和迅速,同时于了客户深度从定制的能力。

除此以外一个关键的指标便是性。FlexGrid不断与其他产品比,以保险我们足足快。Flex理念让我们的文本足够小(压缩后大约25K),我们针对其他的框架没有其它借助。最显眼的特性改进是经编造渲染。FlexGrid虚拟化全部之DOM,每次只绘制需要填写视区的单独元格(和一些乎要滚动平滑的缓冲区)。当表格滚动,单元格(DOM元素)会叫回收。虚拟渲染意味着Grid可以当1秒内绑定百万级的数额。

末,最要害的特性之一即是轻车熟路的操作。FlexGrid基于Excel所有的相行为,这可能是用户最好常用的操作Grid的办法了。人们希望在滚动,点击,尤其是用键盘命令(包括剪切板函数)时收获确定的表现,而无是咱团结发明的。我们学了Excel,因此用户在使用我们的报表时会感觉特别清爽,令人惊呆之凡,许多别的Grid发明了它们自己的所作所为或者不全支持滚动与键盘行为。比如当你挑一行数并遵循停向下箭头,许多报表并无会见显现有而预想的行。

行使标志语言来声明UI控件

现今,我们来探望在FlexGrid在AngularJS下的优势。在AngularJS下最为深的便宜虽是FlexGrid的标记语言:Angular组件提供了运用标志语言来声称控件的力。声明标记很好地照了MVVM设计模式,我们可了通过View(标记语言)来布局我们的零件。

FlexGrid支持下Angular标记语言来声称完整的API。你了好利用标志语言设置属性,附加事件,配置子组件(比如列)。

下面是一个例,演示了怎样使用Angular2标记语言来安排FlexGrid。

<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>

 

脚是咱们就声明的符语言得到的结果。

图片 2

 

行使标志语言声明FlexGrid控件

成百上千别样的Grid组件仅提供了运用标志语言声明一个控件的能力,这招有的安排都须运用JavaScript(ViewModel)完成。这如View和ViewMode之间混乱不到头,迫使开发者必须使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,还足以于每一个单元格中用所有的Angular语法。让咱们看看FlexGrid单元格模板标记是多么强大。

图片 3😉

<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">
        10000 ?'green':'red'):''}"
        style="font-weight:700">
          { {item.downloads}}

    </template>
    <template wjFlexGridCellTemplate [cellType]="'Group'" *ngIf="customGroup" #cell="cell">
      Sum = { {cell.value | number:'1.0-0'}}
    </template>
  </wj-flex-grid-column>
</wj-flex-grid>

图片 4😉

我们声明的只有元格模板得到的结果

图片 5

 Angular2中可是复用的无非元格模板

再度强调,为了当任何表格控件被贯彻这种作用,你用编制JavaScript文件,并ViewModel中编辑。

 

用数据绑定自动更新控件。

自我相信Angular最具有生产力的功利是绑定表达式,这允许我们创建的控件可以活动地应数据变动,使我们打麻烦的事件处理程序与DOM操作着解放出来。

FlexGrid所有的性能都支持数据绑定,另外,我们尚呢片亟需双向数据绑定的习性提供双向绑定。不欲编制任何代码,您尽管足以绑定组件为处理事件和与Model交互数据。

数据绑定以任何的开平台(Java,.NET)都是一样对等国民,Angular使它们换得尤为容易,并且同时支持单向和双向数据绑定。

TypeScript:与Angular 2上发的同。

FlexGrid和具备的Wijmo控件都以TypeScript编写。我们以Microsoft平台工作起相当丰富之同段历史了,所以当TypeScript变得成熟时,我们有一样种植贱的感到。TypeScript给了咱同样栽类似于编写C#
的体会:类,继承,强类型,类型检查,构建时不当检查等等。它是咱们创建公司级JavaScript控件的催化剂,就比如咱于其余平台所开的,我们无需以API或语法中举行其他的投降。

可能不过着重之而是,TypeScript
为我们提供了创真正的控件而无是有点部件的能力。FlexGrid作为一个类继承自我们的主导控件类。当聊部件强迫你采取让人为难的函数去装一个属性与传值时,FlexGrid却生getter
和setter
访问器,你可以一直设置他们。Wijmo也富含一个用以简单加加处理程序的波模型。

如果我们的用户选择使用TpyeScript来出时,将会晤以支撑之IDE中落智能提醒、警告,当她们尝试分配也一个性质分配不科学的类别时有错误信息。

TypeScript最吸引人口的风味就是是咱的客户可继续并扩大我们的控件,这契合我们的Flex理念,简化了控件自定制并压缩不当。

末,我们跟Angular2齐头并进。很惊喜地张几年前我们做出的一个控制,采用了微软的言语。我们的控件类已经采取TypeScript,因此可以同Angular2无缝结合。我们简要地扩大了其并加加了首数据用来在Angular2组件中展露其。

毫不听信我之单方面之词:您为尝试

“我们进了Wijmo,他们之组织做了一个伟大的办事:界面美观;深思熟虑的架;完善的文档;跟进不断变更之技艺。”思科公司的BJ
Jeong说。

设自己的仿没说服你,鼓励公错过品味FlexGrid,证明自己的是非。如果我错了并且FlexGrid被别的Grid控件打败,你可以告知我。20年来我们于不曾停下前进和加强,我们永世为非会见终止。立即下充斥进行体验。

下载 Wijmo
5

相关文章