详解支持Angular 2的表格控件


Posted in Javascript onJanuary 19, 2017

前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝。在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱。当然这其中也包括我。如果你想了解Angular 2,推荐官方网站:英文版、中文版。通过快速起步,可以快速体验Angular 2。

公司的一个项目想基于Angular 2的2.4 版本进行开发,目前还在进行前期的调研阶段。我担当的任务就是研究基于Angular 2的UI控件,在官方网站的资源中列出了很多支持Angular 2的资源。发现Wijmo的Flexgrid控件已经支持Angular 2的2.4版本,初步满足我们的需求。

详解支持Angular 2的表格控件

一、环境搭建

Angular 2不仅是功能上和Angular 1有很多的差别,环境搭建也是区别很大。很多初学者反馈Angular 2的代码很难运行起来。Angular2是基于ES6来开发的,所以会有很多第三方依赖。由于很多浏览器还不支持ES6,所以Angular2引入了很多polyfill或者shim, 导致我们引入了第三方依赖。下面以FlexGrid为例来说明如何搭建运行环境。

1、  安装NodeJS

可以从Node官网下载 https://nodejs.org/en/download/。

2、  新建目录来存放项目

mkdir ng2-flexGrid

cd ng2-flexGrid

3、  配置文件

package.json

用来标记项目需要使用的npm依赖包。

{
 "name": "wj-ng2-flexgrid",
 "version": "1.0.0",
 "scripts": {
 "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
 "lite": "lite-server",
 "tsc": "tsc",
 "tsc:w": "tsc -w"
 },
 "licenses": [
 {
 "type": "MIT",
 "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
 }
 ],
 "dependencies": {
 "@angular/common": "~2.1.1",
 "@angular/compiler": "~2.1.1",
 "@angular/core": "~2.1.1",
 "@angular/forms": "~2.1.1",
 "@angular/http": "~2.1.1",
 "@angular/platform-browser": "~2.1.1",
 "@angular/platform-browser-dynamic": "~2.1.1",
 "@angular/router": "~3.1.1",
 "@angular/upgrade": "~2.1.1",
 "angular-in-memory-web-api": "~0.1.13",
 "core-js": "^2.4.1",
 "reflect-metadata": "^0.1.8",
 "rxjs": "5.0.0-beta.12",
 "systemjs": "0.19.39",
 "zone.js": "^0.6.25"
 },
 "devDependencies": {
 "@types/core-js": "^0.9.34",
 "@types/node": "^6.0.45",
 "concurrently": "^3.0.0",
 "lite-server": "^2.2.2",
 "typescript": "^2.0.3"
 }
}

tsconfig.json

TypeScript的配置文件,定义TypeScript 编译器如何从项目源文件生成 JavaScript 代码。

{
 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "moduleResolution": "node",
 "sourceMap": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "removeComments": false,
 "noImplicitAny": false
 }
}

systemjs.config.js

为SystemJS(模块加载器)提供到哪里查找应用模块的信息,并注册了所有必备的依赖包。

/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
 System.config({
 paths: {
 // paths serve as alias
 'npm:': 'node_modules/'
 },
 // map tells the System loader where to look for things
 map: {
 // our app is within the app folder
 app: 'app',
 // angular bundles
 '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
 '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
 '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
 '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
 '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
 '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
 '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
 '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
 '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
 // other libraries
 'rxjs':   'npm:rxjs',
 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
 },
 // packages tells the System loader how to load when no filename and/or no extension
 packages: {
 app: {
 main: './main.js',
 defaultExtension: 'js'
 },
 rxjs: {
 defaultExtension: 'js'
 }
 }
 });
})(this);

4、  运行npm install

 详解支持Angular 2的表格控件

NPM会根据package.json中定义的包进行安装。会产生一个node_modules目录,将这些包放在这里。

至此环境搭建的任务就已经完成了。下面我们以FlexGrid为例说明支持Angular 2。

二、支持Angular 2的表格控件如何使用

1、HTML

<html>
<head>
 <meta charset="UTF-8">
 <title>使用 Angular 2 来创建FlexGrid控件</title>
 <!--angular 2 模块-->
 <!--用于填充旧版浏览器-->
 <script src="node_modules/core-js/client/shim.min.js"></script>
 <script src="node_modules/zone.js/dist/zone.js"></script>
 <script src="node_modules/reflect-metadata/Reflect.js"></script>
 <script src="node_modules/systemjs/dist/system.src.js"></script>
 <!--systemjs 配置-->
 <script src="systemjs.config.js"></script>
 <!--wijmo 模块-->
 <script src="scripts/vendor/wijmo.min.js"></script>
 <script src="scripts/vendor/wijmo.grid.min.js"></script>
 <link rel="stylesheet" href="styles/wijmo.min.css">
 <script src="scripts/vendor/wijmo.angular2.min.js"></script>
 <!--mine-->
 <script>
 System.import('./app/main').catch(function(err){ console.error(err); });
 </script>
</head>
<body>
 <!--申明根组件-->
 <app-cmp>
 Loading
 </app-cmp>
</body>
</html>

在HTML宿主页面中,除了Angular 2中必须的组件,还需要引入Wijmo脚本。

2、编写数据服务

'use strict'
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
 getData(count: number): wijmo.collections.ObservableArray {
 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;
 }
}

3、编写根组件

现在我们编写应用的第一个组件:根组件 app.component ,也是这个程序唯一的组件。在这个组件中,需要引入两个元标记:Component, Inject。还需要注入定义的数据服务data.Service。

app.component.ts:

import { Component, Inject } from '@angular/core';
import { DataService } from '../services/data.service';
@Component ({
 selector:'app-cmp',
 templateUrl:'app/components/app.component.html',
})
export class AppComponent{
 protected dataSvc:DataService;
 data: wijmo.collections.CollectionView;
 constructor(@Inject(DataService) dataSvc:DataService){
 this.dataSvc = dataSvc;
 this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(50));
 }
}

app.component.html:

<div class="header">
 <h2>
 展示如何在angular 2上使用 Wijmo的FlexGrid。
 </h2>
</div>
<div>
<wj-flex-grid [itemsSource]="data"> </wj-flex-grid>
</div>

在这里仅仅需要引入wj-flex-grid标记,就可以创建FlexGrid控件。wj-flex-grid 组件是作为一个子组件存在,在app.module 模块中注入。itemsSource 绑定一个数据源,这个itemsSource是flexgrid已经封装完成的属性。

在Angular 2下使用FlexGrid的最大好处就是:Angular 2组件提供了使用标记语言来声明控件的能力。声明标记很好地遵循了MVVM设计模式,我们可以完全通过View(标记语言)来配置我们的组件。FlexGrid支持使用Angular 2标记语言来声明完整的API。你完全可以使用标记语言设置属性,附加事件,配置子组件。

4、编写根模块

在根模块中将组件注入,需要将引用的所有的组件和模块都要注入进来。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { AppComponent } from './components/app.component';
import { DataService } from './services/data.service';
@NgModule({
 imports: [ WjGridModule, BrowserModule],
 declarations: [AppComponent],
 providers:[DataService],
 bootstrap: [AppComponent],
})
export class AppModule { }

5、引导程序

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

三、运行

在命令行执行 npm start,这时,程序会自动打开默认浏览器并渲染页面。

start 命令是执行定义在 package.json 文件中的scripts命令。 会将ts代码编译为原生js,并且会启动一个静态服务器。 这个服务器会检测文件的变化,当发现文件改动,那么会自动编译ts代码。

下面是运行的结果:

详解支持Angular 2的表格控件

FlexGrid内置的基本功能比如:排序、过滤、分组、编辑等,也以通过可选的扩展来提供其他功能。FlexGrid和其它产品比较,性能还是不错的。它的文件尺寸比较小压缩后约25K。

下载源代码:http://xiazai.3water.com/201701/yuanma/ng2-flexGrid_3water.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
JS实现图片放大镜插件详解
Nov 06 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
深入浅析javascript函数中with
Oct 28 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 #Javascript
JS生成一维码(条形码)功能示例
Jan 19 #Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 #Javascript
javascript中json基础知识详解
Jan 19 #Javascript
JavaScript实现垂直滚动条效果
Jan 18 #Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 #Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 #Javascript
You might like
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
php反射应用示例
2014/02/25 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
简单实现php上传文件功能
2017/09/21 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
python连接oracle数据库实例
2014/10/17 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
办公室文秘自我评价
2013/09/21 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
暑期家教宣传单
2015/07/14 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python