AngularJS最棒的Angular2表格控件

以往市面上有雅量的JavaScript数据表格控件,包涵开源的第壹方的和自产自销的。能够说Wijmo的Flexgrid是近来适应Angular
2的最佳的报表控件。

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

 AngularJS 1

为了选择Angular
2表格,首先你要求了利尿格的骨干供给。FlexGrid早先于壹玖玖柒年,当时选取C++为Visual
Basic编写的控件。多年来,它不断进步并在八个平台获得周全,尤其是JavaScript平台。FlexGrid
因为Flex的见解而命名,控件应当涵盖最亟需的关键功用集和可扩张的能力。内置的基本作用比如:排序、分组、编辑,同时别的相比较花哨的事物能够通过可选的扩展来提供。那将会维持控件的简练和飞跃,同时给了客户深度自定制的力量。

别的二个首要的指标正是性质。FlexGrid不断和任何产品比较,以担保大家丰硕快。Flex理念使得大家的文本充裕小(压缩后约25K),大家对别的的框架没有别的借助。最掌握的属性革新是经过编造渲染。FlexGrid虚拟化全体的DOM,每回只绘制需求填写视区的单元格(和部分为使滚动平滑的缓冲区)。当表格滚动,单元格(DOM元素)会被回收。虚拟渲染意味着Grid能够在1秒内绑定百万级的数额。

说到底,最重要的性状之一正是熟习的操作。FlexGrid基于Excel全数的互相行为,那也许是用户最常用的操作Grid的章程了。人们盼望在滚动,点击,特别是选取键盘命令(包涵剪切板函数)时获得明确的一坐一起,而不是我们温馨发明的。大家模仿了Excel,因而用户在选用大家的表格时会感觉很舒畅(英文名:Jennifer),让人奇怪的是,许多别的的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>

 

上边是大家已扬言的号子语言获得的结果。

AngularJS 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单元格模板标记是何其强大。

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

AngularJS 4😉

大家申明的单元格模板获得的结果

AngularJS 5

 Angular第22中学可复用的单元格模板

再也强调,为了在任何表格控件中达成那种效果,你须求编制JavaScript文件,并ViewModel中编辑。

 

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

自己相信Angular最具生产力的裨益是绑定表明式,这允许大家创设的控件能够自动地响应数据变动,使我们从麻烦的事件处理程序和DOM操作中解放出来。

FlexGrid全部的质量都帮忙数据绑定,其余,大家还为一些亟待双向数据绑定的习性提供双向绑定。不供给编写制定任何代码,您就足以绑定组件以处管事人件和与Model交互数据。

数量绑定在其他的费用平台(Java,.NET)都是一等百姓,Angular使它变得更为不难,并且还要帮助单向和双向数据绑定。

TypeScript:与Angular 2美满良缘。

FlexGrid和具备的Wijmo控件都利用TypeScript编写。大家在Microsoft平台工作有一定长的一段历史了,所以当TypeScript变得干练时,大家有一种家的感到。TypeScript给了作者们一体系似于编写C#
的体验:类,继承,强类型,类型检查,营造时不当检查等等。它是我们创设公司级JavaScript控件的催化剂,如同我们在任何平台所做的,大家无需在API或语法中做别的的妥胁。

大概最要害的而是,TypeScript
为大家提供了成立真正的控件而不是小部件的能力。FlexGrid作为3个类继承自大家的中坚控件类。当小部件强迫你接纳令人为难的函数去设置二个性能和传值时,FlexGrid却有getter
和setter
访问器,你能够直接设置他们。Wijmo也暗含三个用以不难添加处理程序的轩然大波模型。

要是大家的用户采用采用TpyeScript来支付时,将会在接济的IDE中拿走智能提醒、警告,当她们尝试分配为三个属性分配不科学的档次时有错误音讯。

TypeScript最吸引人的性状正是我们的客户能够持续并扩张大家的控件,这契合我们的Flex理念,简化了控件自定制并缩减不当。

末尾,我们与Angular2齐镳并驱。很惊喜地收看几年前大家做出的3个控制,接纳了微软的语言。大家的控件类已经选拔TypeScript,由此得以和Angular2无缝结合。大家大致地壮大了它们并添加了元数据用来在Angular2组件中暴光无遗它们。

毫无听信小编的三头之词:您也蓄势待发

“大家购买了Wijmo,他们的协会做了2个光辉的工作:界面美观;不假思索的架构;完善的文书档案;跟进不断变化的技术。”Cisco公司的BJ
Jeong说。

一经自己的文字没有说服你,鼓励你去品尝FlexGrid,证明自家的是非曲直。倘若自个儿错了同时FlexGrid被其他Grid控件制伏,你能够告诉自个儿。20年来咱们从不曾甘休前进和增强,大家永远也不会甘休。立时下载实行体验。

下载 Wijmo
5

相关文章