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


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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
JavaScript 全角转半角部分
Oct 28 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
JavaScript表单验证实现代码
May 22 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
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初学者头痛的十四个问题
2006/07/12 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
JavaScript 参考教程
2006/12/29 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python实现一个猜拳游戏
2020/04/05 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书