在上一篇我们学习了如何使用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>
效果:
WjFlexGrid 组件继承自 FlexGrid 控件,因此继承了其全部的属性,事件和方法。
wj-flex-grid 组件可以包含 WjFlexGridColumn, WjFlexGridCellTemplate, WjFlexGridDetail 以及 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