近几年 Web 前端框架特别流行，比如 AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS 等。表格控件是我们在开发中经常要用到的控件。有没有能够在多种前端控件下都能使用的表格控件？还真有！Wijmo中的FlexGrid，能支持很多主流的框架。这里主要介绍在纯 JavaScript 和 AngularJS 下的使用方法。

在纯 JavaScript 下使用

HTML 文件：

1. 引入Wijmo的JS文件和样式：wijmo.min.css 、wijmo.min.js、wijmo.grid.min.js

2. 引入app.js和FlexGrid.js文件。

3. 定义一个div元素用于显示Grid

在app.js中定义appData，其中的getData方法根据传入的Count产生数据。

FlexGrid.js：

在FlexGrid.js中调用data.getData(30)获取数据30个数据。获得FlexGrid控件，并进行数据绑定。

下面就是运行结果：

在AngularJS下使用FlexGrid

HTML文件：

1. 引入angular.min.js

2. 引入Wijmo相关的文件wijmo.min.js、wijmo.grid.min.js、wijmo.angular.min.js、wijmo.min.css

3. 引入app.js和control.js

4. 添加NG指令ng-app、ng-controller

5. 通过wj-flex-grid指令定义表格，并设置数据源

app.js文件：

control.js文件：

其运行结果和纯JS的结果完全一样。

结语

通过上面的两个示例可以看到，无论是在纯JS中还是在AngularJS中，使用FlexGrid都非常简单。尤其是在 AngularJS 框架中通过 Wijmo 自定义的 Angular 指令 wj-flex-grid，使用表格控件很容易。Wijmo 支持 AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS、Ionic等前端框架，就不在一一示例。FlexGrid 的功能包括排序、过滤、分组、分页、单元格合并、冻结、格式化、条件样式、单元格模板、主题、树形结构等。感兴趣的同学可以做扩展阅读，链接如下：

• Wijmo 中文官网

• FlexGrid 详细功能介绍

点击此处，可下载本文中介绍的示例源码

==