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


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 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
JavaScript严格模式详解
Jan 16 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
JS 实现分页打印功能
May 16 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 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
一个简单实现多条件查询的例子
2006/10/09 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
python编程羊车门问题代码示例
2017/10/25 Python
详解python eval函数的妙用
2017/11/16 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
《值日生》教学反思
2014/02/17 职场文书
户籍证明格式
2014/09/15 职场文书
2014年审计工作总结
2014/11/17 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
vue打包时去掉所有的console.log
2022/04/10 Vue.js