原創|使用教程|編輯:何躍|2021-09-22 09:43:47.020|閱讀 290 次
概述:EasyUI框架幫助你輕松建立你的網頁應用。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
1. 復制/粘貼/ng-easyui/components文件夾到你項目中的參考文件夾,或者使用NPM進行安裝。
npm install ng-easyui --save2.將主題文件導入到你的style.css文件。
@import '~ng-easyui/themes/material/easyui.css'; @import '~ng-easyui/themes/angular.css'; @import '~ng-easyui/themes/icon.css';或者編輯.angular-cli.json文件,在樣式部分添加這些行。
"styles": [
    "styles.css",
    "../node_modules/ng-easyui/themes/material/easyui.css",
    "../node_modules/ng-easyui/themes/angular.css",
    "../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';
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>Basic DataGrid</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"}
    ];
}
以上四步就是在Angular中引用jQuery EasyUI的具體方法了,感興趣的朋友可以實踐試一試!
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn