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


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 相关文章推荐
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
基于node.js之调试器详解
Aug 22 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 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接收POST数据,解析json数据
2013/06/28 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
img的onload的另类用法
2008/01/10 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
javascript常见用法总结
2014/05/22 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jQuery实用技巧必备(下)
2015/11/03 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python 读取数据库并绘图的实例
2019/12/03 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
八年级生物教学反思
2014/01/22 职场文书
文化产业实施方案
2014/06/07 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
邹越演讲观后感
2015/06/15 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android