Wijmo Angular2入门：FlexGrid控件（2）列的定义

在上一篇我们学习了如何使用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>