下载 Angular 1.2.0 EasyUI

安装

1. 复制/粘贴/ng-easyui/components文件夹到项目中的参考文件夹，或者使用NPM 安装。

npm install ng-easyui --save

2. 引入CSS文件。

将样式css文件导入。

@import '~ng-easyui/themes/material/easyui.css'; @import '~ng-easyui/themes/angular.css'; @import '~ng-easyui/themes/icon.css';

或者编辑. angle -cli,json文件，并在样式部分下添加这些行。

"styles": [ "styles.css", "/jeasyui/node_modules/ng-easyui/themes/material/easyui.css", "/jeasyui/node_modules/ng-easyui/themes/angular.css", "/jeasyui/node_modules/ng-easyui/themes/icon.css" ],

3. 打开应用程序模块并添加对EasyUIModel的引用。

import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { EasyUIModule } from 'ng-easyui/components/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, BrowserAnimationsModule, EasyUIModule ] }) export class AppModule { }

4. 向app.component.ts文件中添加组件。

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>基本数据表格</h2> <eui-datagrid [data]="data" style="height:250px"> <eui-grid-column field="itemid" title="Item ID"></eui-grid-column> <eui-grid-column field="name" title="Name"></eui-grid-column> <eui-grid-column field="listprice" title="List Price" align="right"></eui-grid-column> <eui-grid-column field="unitcost" title="Unit Cost" align="right"></eui-grid-column> <eui-grid-column field="attr" title="Attribute" width="30%"></eui-grid-column> <eui-grid-column field="status" title="Status" align="center"></eui-grid-column> </eui-datagrid> ` }) export class AppComponent { data = [ {"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"}, {"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"}, {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"}, {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"}, {"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"}, {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"}, {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"}, {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"}, {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"}, {"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"} ]; }

许可证

免费版

免费软件版本可以在下面找到 免费软件许可证, 您可以在任何免费授权的项目中使用它.

商业版

商业版也可以在下面找到 商业许可证, 您可以在商业项目中使用它.

购买