脚本宝典收集整理的这篇文章主要介绍了强不强?能在多种前端框架下使用的表格控件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
近几年 Web 前端框架特别流行,比如 AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS 等。表格控件是我们在开发中经常要用到的控件。有没有能够在多种前端控件下都能使用的表格控件?还真有!Wijmo中的FlexGrid,能支持很多主流的框架。这里主要介绍在纯 JavaScript 和 AngularJS 下的使用方法。
在纯 JavaScript 下使用
HTML 文件:
@H_360_13@
引入Wijmo的JS文件和样式:wijmo.min.css 、wijmo.min.js、wijmo.grid.min.js
引入app.js和FlexGrid.js文件。
定义一个div元素用于显示Grid
在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
app.js文件:
control.js文件:
其运行结果和纯JS的结果完全一样。
结语
通过上面的两个示例可以看到,无论是在纯JS中还是在AngularJS中,使用FlexGrid都非常简单。尤其是在 AngularJS 框架中通过 Wijmo 自定义的 Angular 指令 wj-flex-grid,使用表格控件很容易。Wijmo 支持 AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS、Ionic等前端框架,就不在一一示例。FlexGrid 的功能包括排序、过滤、分组、分页、单元格合并、冻结、格式化、条件样式、单元格模板、主题、树形结构等。感兴趣的同学可以做扩展阅读,链接如下:
以上是脚本宝典为你收集整理的强不强?能在多种前端框架下使用的表格控件全部内容,希望文章能够帮你解决强不强?能在多种前端框架下使用的表格控件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。