能在多种前端框架下使用的表格控件
近几年Web前端框架特别流行,比如AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS等。表格控件是我们在开发中经常要用到的控件。
有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid可以实现,它能支持很多主流的框架。
这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用。
一、在纯JavaScript下使用FlexGrid
HTML文件:
引入Wijmo的JS文件和样式:wijmo.min.css 、wijmo.min.js、wijmo.grid.min.js
引入app.js和FlexGrid.js文件。
定义一个div元素用于显示Grid
App.js文件:
在app.js中定义appData,其中的getData方法根据传入的Count产生数据。
FlexGrid.js:
在FlexGrid.js中调用data.getData(30)获取数据30个数据。获得FlexGrid控件,并进行数据绑定。
下面就是运行结果:
二、在AngularJS下使用FlexGrid
HTML文件:
引入angular.min.js
引入Wijmo相关的文件wijmo.min.js、wijmo.grid.min.js、wijmo.angular.min.js、wijmo.min.css
引入app.js和control.js
添加NG指令ng-app、ng-controller
通过wj-flex-grid指令定义表格,并设置数据源
app.js文件:
var app = angular.module('app', ['wj']);
control.js文件:
其运行结果和纯JS的结果完全一样。
通过上面的两个示例可以看到无论是在纯JS中还是在AngularJS中使用FlexGrid都非常简单。尤其是在AngularJS框架中通过Wijmo自定义的Angular指令wj-flex-grid使用表格控件很容易。
Wijmo支持AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS、Ionic等前端框架,就不在一一示例。
FlexGrid的功能包括排序、过滤、分组、分页、单元格合并、冻结、格式化、条件样式、单元格模板、主题、树形结构等。
请通过以下方式联系我们,获取源代码:
微信:GrapeCityDT
邮件:marketing.xa@grapecity.com
官网:www.gcpowertools.com.cn
关于葡萄城控件
葡萄城是一家跨国软件研发集团,专注控件领域近30年,是全球最大的控件提供商,也是微软认证的金牌合作伙伴。
请先 后发表评论~