博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
强不强?能在多种前端框架下使用的表格控件
阅读量:6435 次
发布时间:2019-06-23

本文共 965 字,大约阅读时间需要 3 分钟。

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

在纯 JavaScript 下使用

HTML 文件:

图片描述

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

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

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

图片描述

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

图片描述

control.js文件:

图片描述

其运行结果和纯JS的结果完全一样。

结语

通过上面的两个示例可以看到,无论是在纯JS中还是在AngularJS中,使用FlexGrid都非常简单。尤其是在 AngularJS 框架中通过 Wijmo 自定义的 Angular 指令 wj-flex-grid,使用表格控件很容易。Wijmo 支持 AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS、Ionic等前端框架,就不在一一示例。FlexGrid 的功能包括排序、过滤、分组、分页、单元格合并、冻结、格式化、条件样式、单元格模板、主题、树形结构等。感兴趣的同学可以做扩展阅读,链接如下:

==

转载地址:http://plhga.baihongyu.com/

你可能感兴趣的文章
Tmux : GNU Screen 的替代品
查看>>
SQL 备份还原单个表
查看>>
二分求幂,快速求解a的b次幂
查看>>
增强for循环、Map接口遍历、可变參数方法
查看>>
提高ipad浏览器下大尺寸xml文件解析的性能
查看>>
求【javascript设计模式】【高性能网站建设指南】PDF!哪位有给下啊!!!
查看>>
SCons: A software construction tool
查看>>
MySQL Workbench的使用教程 (初级入门版)
查看>>
学习新 api 的思考过程 4.18
查看>>
想要设计自己的微服务?看这篇文章就对了
查看>>
[XSS神器]XssEncode chrome插件 - 0x_Jin
查看>>
Android角落 不妨再看LinearLayout
查看>>
一起撸个朋友圈吧(step5) - 控件篇【评论控件优化】
查看>>
一起撸个朋友圈吧 图片浏览(上)【图片点击前景色】
查看>>
[译] 原生 JavaScript 值得学习吗?答案是肯定的
查看>>
29岁了还一事无成是人生的常态?
查看>>
gRPC-rs:从 C 到 Rust
查看>>
Mysql-高性能索引
查看>>
chrome浏览器最小字号解决方案
查看>>
富文本编译器UEditor+SSM的使用
查看>>