详解能在多种前端框架下使用的表格控件

近几年网前端框架特别流行，比如AngularJS、AngularJS 2、ReactJS、击倒JS、VueJS等。表格控件是我们在开发中经常要用到的控件。有没有能够在多种前端控件下都能使用的表格控件？最近研究发现Wijmo中的弹性网格是一款不错的表格控件，它能支持很多主流的框架。这里主要介绍在纯Java脚本语言和AngularJS下弹性网格的使用。

一、在纯Java脚本语言下使用弹性网格

超文本标记语言文件：

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title/title meta charset=' utf-8 '/link rel='样式表href=' https://netdna。bootstrapcdn。com/bootstrap/3。3 .2/CSS/bootstrap。量滴CSS '/！-Wijmo-link href=' style/vendor/Wijmo。量滴CSS ' rel='样式表'/脚本src=' http :脚本/供应商/Wijmo。量滴js ' type=' text/JavaScript '/script script src=' http : script/厂商/Wijmo。网格。量滴js ' type=' text/JavaScript '/脚本src=' http 3360脚本/app。js ' type=' text/引入Wijmo的射流研究…文件和样式：wijmo.min.css、wijmo.min.js、wijmo.grid.min.js

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

3、 定义一个差异元素用于显示格子

App.js文件：

var appData={ getdata : function(count){ var counters='美国，德国，英国，日本，意大利，希腊。split('，')，data=new wijmo。收藏品。observablearray()；for(var I=0；我数；i ) { data.push({ id: i，country : country[I % country。length]，date: new Date(2014，i % 12，i % 28)，amount: Math.random() * 10000，active : I % 4===0 })；}返回数据；}}在app.js中定义appData，其中的获取数据方法根据传入的数数产生数据。

FlexGrid.js:

(函数(wijmo，data){ var cv=data。getdata(30)；var grid=new wijmo。网格。flex网格(' # grid ')；grid.itemsSource=cv})(wijmo，appData)；在FlexGrid.js中调用data.getData(30)获取数据30个数据。获得弹性网格控件，并进行数据绑定。

下面就是运行结果：

二、在AngularJS下使用弹性网格

超文本标记语言文件：

html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title meta charset=' utf-8 '/script src=' http :https://Ajax。谷歌API。com/Ajax/libs/angular js/1。3 .15/棱角分明。量滴js '/script script src=' http : script/vendor/wijmo。量滴js '/script script src=' http 3360 script/vendor/wijmo。网格。量滴射流研究…引入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、 添加窄轨距(窄轨距)指令天然气应用、天然气控制器

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

app.js文件：

var app=angular.module('app '，[' wj '])；

control.js文件：

app.controller('appCtrl '，函数($scope) { //生成一些随机数据函数getData(count){ var country='美国，德国，英国，日本，意大利，希腊。split('，')，data=new wijmo。收藏品。observablearray()；for(var I=0；我数；i ) { data.push({ id: i，country : country[I % country。length]，date: new Date(2014，i % 12，i % 28)，amount: Math.random() * 10000，active : I % 4==0 })；}返回数据；} $ scope。data=GetDATa(30)；});其运行结果和纯射流研究…的结果完全一样。

从上面两个例子可以看出，在纯JS或者AngularJS中使用FlexGrid是非常简单的。特别是，通过Wijmo的自定义Angular指令wj-flex-grid，可以很容易地在AngularJS框架中使用表控件。Wijmo支持AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS、ion等前端框架。FlexGrid的功能包括排序、过滤、分组、分页、单元格合并、冻结、格式化、条件样式、单元格模板、主题、树形结构等。

源代码下载

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！