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


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 相关文章推荐
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
详解JSON.stringify()的5个秘密特性
May 26 Javascript
React实现轮播效果
Aug 25 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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
mouse_on_title.js
2006/08/25 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
机修工岗位职责
2013/11/24 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
环保标语口号
2014/06/13 职场文书
趣味运动会开幕词
2015/01/28 职场文书
怎样写辞职信
2015/02/27 职场文书
人事任命书范本
2015/09/21 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
Python语言内置数据类型
2022/02/24 Python
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技