首页
所有分类
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 相关文章推荐
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
原生js实现简单轮播图
Oct 26 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
触发器(3) Geospatial(1) 入门基础(1) IOC(3) 自动化(1) 数据类型(8) Bean(3) metaclass(1) Hash(1) XML(1)
You might like
linux中cd命令使用详解
2015/01/08 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
PHP设计模式（七）组合模式Composite实例详解【结构型】
2020/05/02 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
JS继承 笔记
2011/07/13 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
jquery easyui datagrid实现增加，修改，删除方法总结
2016/05/25 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
JS前端开发判断是否是手机端并跳转操作（小结）
2017/02/05 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
双立人美国官方商店：ZWILLING集团餐具和炊具
2020/05/07 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
无传销社区工作方案
2014/05/13 职场文书
委托书如何写
2014/08/30 职场文书
保送生自荐信范文
2015/03/26 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis