首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解支持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

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

详解支持Angular 2的表格控件

- Author -

启明

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
jQuery表单验证之密码确认
May 22 jQuery
React中的render何时执行过程
Apr 13 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
node.js读取Excel数据（下载图片）的方法示例
Aug 02 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 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
Master(1) PyAutoGUI(1) 继承(1) transaction(1) Slave(1) 百度地图(1) 封装(1) 主从复制(1) variables(1) gRPC(3)
You might like
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
JQuery球队选择实例
2015/05/18 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python线性回归实战分析
2018/02/01 Python
python getpass实现密文实例详解
2019/09/24 Python
python实现在线翻译
2020/06/18 Python
Python的信号库Blinker用法详解
2020/12/31 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
艺术系应届生的自我评价
2013/10/19 职场文书
税务专业毕业生自荐信
2013/11/10 职场文书
高一历史教学反思
2014/01/13 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
品牌服务方案
2014/06/03 职场文书
党的群众路线教育实践活动个人对照检查材料（四风）
2014/11/05 职场文书
继续教育个人总结
2015/03/03 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android