原創(chuàng)|使用教程|編輯:龔雪|2021-08-31 11:11:06.660|閱讀 285 次
概述:本文主要介紹如何安裝和開始使用Kendo UI for Angular,歡迎下載最新版產(chǎn)品體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
本文主要介紹如何安裝和開始使用Kendo UI for Angular。
最新的Kendo UI for Angular包面向當(dāng)前Angular長(zhǎng)期支持版本,直到最新的官方Angular版本。
1. 開始使用Angular最簡(jiǎn)單方法是使用 Angular CLI 工具,要搭建項(xiàng)目結(jié)構(gòu),請(qǐng)按照該工具的安裝說明進(jìn)行操作:
	npm install -g @angular/cli
ng new kendo-angular-app
ng new命令將提示您進(jìn)行新Angular應(yīng)用程序的一些設(shè)置,使用這些:
2. 新應(yīng)用生成后,將src/app/app.component.html的內(nèi)容替換為:
<h1>Hello Kendo UI for Angular!</h1>
3. 然后,在瀏覽器中構(gòu)建并打開Angular應(yīng)用程序:
	cd kendo-angular-app
ng serve -o
接下來,我們將向應(yīng)用程序添加一些數(shù)據(jù),然后將其綁定到一個(gè)DropDownList和一個(gè)網(wǎng)格中。
通過向應(yīng)用程序添加一些數(shù)據(jù)來準(zhǔn)備使用專業(yè)的數(shù)據(jù)驅(qū)動(dòng)UI組件,為簡(jiǎn)單起見,將使用靜態(tài)本地 JSON 數(shù)據(jù)和可以修改來使用遠(yuǎn)程數(shù)據(jù)的服務(wù),創(chuàng)建以下三個(gè)文件并從 GitHub 中的鏈接文件復(fù)制粘貼它們的內(nèi)容:
Kendo UI for Angular是通過多個(gè)NPM包分發(fā)的,范圍為@progress。向應(yīng)用程序添加一個(gè) Kendo UI Angular DropDownList,并將其綁定到一個(gè)對(duì)象數(shù)組。
1. 使用ng add命令時(shí),DropDowns包安裝需要一個(gè)步驟:
ng add @progress/kendo-angular-dropdowns
ng add命令還會(huì)自動(dòng)安裝默認(rèn)Kendo UI主題。
2. 打開src/app/app.component.ts并從data.categories導(dǎo)入類別:
import { categories } from "./data.categories";
3. 在同一個(gè)文件中,聲明將在DropDownList聲明中使用的變量,defaultItem確定最初選擇的項(xiàng)目:
export class AppComponent {
public dropDownItems = categories;
public defaultItem = { text: "Filter by Category", value: null };
}
4. 最后,打開src/app/app.component.html并添加DropDownList標(biāo)記:
<p> <kendo-dropdownlist [data]="dropDownItems" [defaultItem]="defaultItem" textField="text" valueField="value" > </kendo-dropdownlist> </p>
DropDownList 現(xiàn)在應(yīng)該可以在您的示例頁面上運(yùn)行了。
繼續(xù)添加一個(gè)Kendo UI for Angular網(wǎng)格。
1. 首先,安裝Grid npm包和所有依賴項(xiàng):
ng add @progress/kendo-angular-grid
2. 在src/app/app.component.ts中導(dǎo)入必要的類型和數(shù)據(jù)服務(wù):
import { GridDataResult, PageChangeEvent } from "@progress/kendo-angular-grid";
import { SortDescriptor } from "@progress/kendo-data-query";
import { ProductService } from "./product.service";
import { Observable } from "rxjs";
3. 在組件聲明中添加ProductService作為提供程序:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ProductService]
})
4. 添加將用于對(duì) Grid 進(jìn)行分頁和排序的 AppComponent 類成員:
export class AppComponent {
// ...
public gridItems: Observable<GridDataResult>;
public pageSize: number = 10;
public skip: number = 0;
public sortDescriptor: SortDescriptor[] = [];
public filterTerm: number = null;
constructor(private service: ProductService) {
this.loadGridItems();
}
public pageChange(event: PageChangeEvent): void {
this.skip = event.skip;
this.loadGridItems();
}
private loadGridItems(): void {
this.gridItems = this.service.getProducts(
this.skip,
this.pageSize,
this.sortDescriptor,
this.filterTerm
);
}
public handleSortChange(descriptor: SortDescriptor[]): void {
this.sortDescriptor = descriptor;
this.loadGridItems();
}
}
5. 最后,在 src/app/app.component.html 中添加 Grid 標(biāo)記,在瀏覽器中重建并檢查 Grid:
<kendo-grid [data]="gridItems | async" [pageSize]="pageSize" [skip]="skip" [pageable]="true"
(pageChange)="pageChange($event)" [sortable]="true" [sort]="sortDescriptor" (sortChange)="handleSortChange($event)"
[height]="400">
<kendo-grid-column field="ProductID" title="ID" width="50">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="140" format="{0:c}">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" width="140" filter="boolean">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
</ng-template>
</kendo-grid-column>
</kendo-grid>
我們應(yīng)用程序中的 Grid 實(shí)例可以排序和分頁,它使用單元格模板中的 UnitPrice 列和復(fù)選框的數(shù)字格式來顯示布爾值 Discontinued 字段。
Kendo UI for Angular是Kendo UI系列商業(yè)產(chǎn)品的最新產(chǎn)品。Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級(jí)Angular組件。telerik致力于提供純粹的高性能Angular UI組件,無需任何jQuery依賴關(guān)系。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)