近几年Web前端框架特别流行,比如AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS等。表格控件是我们在开发中经常要用到的控件。有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid是一款不错的表格控件,它能支持很多主流的框架。这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用。
一、在纯JavaScript下使用FlexGrid
HTML文件:
1、 引入Wijmo的JS文件和样式:wijmo.min.css 、wijmo.min.js、wijmo.grid.min.js
2、 引入app.js和FlexGrid.js文件。
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文件:
其运行结果和纯JS的结果完全一样。
通过上面的两个示例可以看到无论是在纯JS中还是在AngularJS中使用FlexGrid都非常简单。尤其是在AngularJS框架中通过Wijmo自定义的Angular指令wj-flex-grid使用表格控件很容易。Wijmo支持AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS、Ionic等前端框架,就不在一一示例。FlexGrid的功能包括排序、过滤、分组、分页、单元格合并、冻结、格式化、条件样式、单元格模板、主题、树形结构等。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。