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

前端之家收集整理的这篇文章主要介绍了详解能在多种前端框架下使用的表格控件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

近几年Web前端框架特别流行,比如AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS等。表格控件是我们在开发中经常要用到的控件。有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid是一款不错的表格控件,它能支持很多主流的框架。这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用。

一、在纯JavaScript下使用FlexGrid

HTML文件

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

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

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

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

App.js文件

在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文件

var app = angular.module('app',['wj']);

control.js文件