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


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 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 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版自动生成文章摘要
2008/07/23 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python语言快速上手学习方法
2018/12/14 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
如何做好总经理助理
2013/11/12 职场文书
毕业学生推荐信
2013/12/01 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
青年联谊会致辞
2015/07/31 职场文书
公司出差管理制度范本
2015/08/05 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis