Wijmo Angular2入门:FlexGrid控件(2)列的定义

本文就来继续深入学习使用Angular2进行wijmo flexgrid的自定义列。经过上一篇的学习,我们了解到,在进行数据绑定的时候,会自动的生成列。或是通过wj-flex-grid-column来指定绑定列。

发布于 2017/02/28 00:00

WijmoJS

在上一篇我们学习了如何使用Angular2创建flexGrid控件:Wijmo Angular2入门:FlexGrid控件(1)创建工程

本文就来继续深入学习使用Angular2进行wijmo flexgrid的自定义列。

经过上一篇的学习,我们了解到,在进行数据绑定的时候,会自动的生成列。

或是通过wj-flex-grid-column来指定绑定列。

比如如下代码是flexgrid控件的数据绑定,并在flexgrid上生成4列:

<p>Here is a data bound FlexGrid control with four columns:</p>
<wj-flex-grid [itemsSource]="data">
  <wj-flex-grid-column 
    [header]="'Country'" 
    [binding]="'country'">
  </wj-flex-grid-column>
  <wj-flex-grid-column 
    [header]="'Sales'" 
    [binding]="'sales'">
  </wj-flex-grid-column>
  <wj-flex-grid-column 
    [header]="'Expenses'" 
    [binding]="'expenses'">
  </wj-flex-grid-column>
  <wj-flex-grid-column 
    [header]="'Downloads'" 
    [binding]="'downloads'">
  </wj-flex-grid-column>
</wj-flex-grid>

 

效果:

FlexGrid01[1]

WjFlexGrid 组件继承自 FlexGrid 控件,因此继承了其全部的属性,事件和方法。

wj-flex-grid 组件可以包含 WjFlexGridColumnWjFlexGridCellTemplateWjFlexGridDetail 以及 WjFlexGridFilter 子组件。

通过[header]指定列头的显示的文字,通过[binding]指定绑定的数据源字段。

wj-flex-grid-column 组件必须包含在一个 WjFlexGrid 组件内部。

使用 wj-flex-grid-column 组件添加 Column 对象至您的 Angular 2 应用程序中。关于 Angular 2 标记语法的更多细节,请参见 Angular 2 标记

 

如果想要自定义列,而不是完全和数据源一致,那么需要做什么。

首先设置在Angular2下设置“auto-generate-columns”为false。

原则上和使用纯JS类似,使用纯JS创建自定义列请参考博客:(一)数据绑定

比如上面例子中的数据绑定列,我们只想显示第一列Country列,那么代码参考:

<wj-flex-grid [itemsSource]="data" auto-generate-columns="false">
  <wj-flex-grid-column 
    [header]="'Country'" 
    [binding]="'country'">
  </wj-flex-grid-column>
</wj-flex-grid>

 

如果要设置列种文字的格式,可以使用格式属性format,比如设置为“n0”。

代码参考:

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

 

详细的效果可以参考在线示例-列定义:

http://demo.grapecity.com.cn/wijmo5/angular2/FlexGridIntro/FlexGridIntro/

示例可以参考安装包路径:\C1Wijmo-Eval_5.20163.234\Samples\JS\Angular2\FlexGridIntro

本文完。

 

更多资源:

Wijmo中文官网:/developer/wijmojs

Wijmo5产品文档:/developer/wijmojscore

Wijmo5在线示例:/developer/wijmojscore

Wijmo&Angular2官网:/developer/wijmojs/angular

如果依然有问题,可以到我们的官方产品论坛发帖咨询:

Wijmo5问题响应通道:http://gcdn.grapecity.com.cn/forum.php?mod=forumdisplay&fid=173

WijmoJS | 下载试用

WijmoJS 是一款基于 HTML5 的前端开发工具包,由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成,如表格(Grid)、图表(Chart)、数据分析(Olap)、导航(Navigation)和金融图表等,完美兼容原生 JavaScript,以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架,可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。

为顺利推进您的产品选型,推荐如下方式,加速产品评估进度:

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态