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


Posted in Javascript onJanuary 11, 2017

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

一、在纯JavaScript下使用FlexGrid

HTML文件:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <meta charset="utf-8" />
 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
 <!-- Wijmo -->
 <link href="styles/vendor/wijmo.min.css" rel="stylesheet" />
 <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script>
<script src="scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
 <script src="scripts/app.js" type="text/javascript"></script>
 <script src="scripts/FlexGrid.js" type="text/javascript"></script>
</head>
<body>
 <div id="grid">
 </div>
</body>
</html>

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

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

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

App.js文件:

var appData = {
 getData: function (count) {
 var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
  data = new wijmo.collections.ObservableArray();
 for (var i = 0; i < count; i++) {
  data.push({
  id: i,
  country: countries[i % countries.length],
  date: new Date(2014, i % 12, i % 28),
  amount: Math.random() * 10000,
  active: i % 4 === 0
  });
 }
 return data;
 }
}

在app.js中定义appData,其中的getData方法根据传入的Count产生数据。

FlexGrid.js:

(function (wijmo, data) {
 var cv = data.getData(30);
 var grid = new wijmo.grid.FlexGrid('#grid');
 grid.itemsSource = cv;
 })(wijmo, appData);

在FlexGrid.js中调用data.getData(30)获取数据30个数据。获得FlexGrid控件,并进行数据绑定。

下面就是运行结果:

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

二、在AngularJS下使用FlexGrid

HTML文件:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <meta charset="utf-8" />
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
 <script src="scripts/vendor/wijmo.min.js"></script>
 <script src="scripts/vendor/wijmo.grid.min.js"></script>
 <script src="scripts/vendor/wijmo.angular.min.js"></script>
 <link rel="stylesheet" href="styles/vendor/wijmo.min.css" />
 <script src="scripts/app.js"></script>
 <script src="scripts/control.js"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
 <wj-flex-grid items-source="data" >
 </wj-flex-grid>
</body>
</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文件:

app.controller('appCtrl', function ($scope) {
 // generate some random data
 function getData(count) {
 var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
  data = new wijmo.collections.ObservableArray();
 for (var i = 0; i < count; i++) {
  data.push({
  id: i,
  country: countries[i % countries.length],
  date: new Date(2014, i % 12, i % 28),
  amount: Math.random() * 10000,
  active: i % 4 == 0
  });
 }
 return data;
 }
 $scope.data = getData(30);
});

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
vuejs父子组件通信的问题
Jan 11 #Javascript
bootstrap 表单验证使用方法
Jan 11 #Javascript
原生js实现无缝轮播图效果
Jan 11 #Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 #Javascript
原生js实现放大镜效果
Jan 11 #Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 #Javascript
微信小程序开发经验总结(推荐)
Jan 11 #Javascript
You might like
php读取csv文件并输出的方法
2015/03/14 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
javascript实现的listview效果
2007/04/28 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
js自定义瀑布流布局插件
2017/05/16 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
详解vue 命名视图
2019/08/14 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python实现趣味图片字符化
2019/04/30 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python中dict使用方法详解
2019/07/17 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python numpy数组中的复制知识解析
2020/02/03 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
python实现感知机模型的示例
2020/09/30 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
普通员工辞职信范文
2015/05/12 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js