Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級Angular組件，telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關系。

網(wǎng)格是顯示一些可重復數(shù)據(jù)行的極好工具，但只有當你提供上下文時，“數(shù)據(jù)”才會變成“信息”。

Kendo UI for Angular Grid允許開發(fā)者將“data card”（數(shù)據(jù)卡）與網(wǎng)格中的行關聯(lián)起來，您可以用它來保存“額外的”或“相關的”信息。用戶可以選擇展開或折疊感興趣的行，但也可以控制顯示哪些行的數(shù)據(jù)卡，以便將網(wǎng)格與UI的其余部分集成在一起。

Kendo UI R1 2023正式版下載

Telerik_KendoUI產(chǎn)品技術交流群：726377843    歡迎一起進群討論

顯示其他詳細信息

使用Kendo UI Angular Grid實現(xiàn)數(shù)據(jù)卡很簡單——只需要三個步驟：

1. 在kendo-grid元素內(nèi)部，添加一個ng-template元素，它引用kendoGridDetailTemplate。
2. 通過在ng-template元素中添加let-dataItem微語法來訪問行中顯示的對象。
3. 在模板中插入HTML。

開發(fā)者可以將ng-template元素放在kendo-grid元素中的任何位置，但是將它放在最后一個kendo-grid-column元素之后可能更有意義。

 作為案例研究，對于顯示Department對象列表的網(wǎng)格，您可以在行中顯示部門的名稱和id(對象的deptName和id屬性)，然后可以使用ng-template數(shù)據(jù)卡來顯示Department對象中的其他屬性。

例如，這個標記顯示了部門的區(qū)域和部門經(jīng)理的員工id：

<kendo-grid-column title="Name" field="deptName" …></kendo-grid-column>
<ng-template kendoGridDetailTemplate let-dataItem>
<strong>Region:</strong> {{ dataItem.region }} <br/>
<strong>Manager:</strong> {{ dataItem.id }}
</ng-template>
</kendo-grid>

結(jié)果網(wǎng)格(其中一行展開)看起來像這樣：

獲取相關數(shù)據(jù)

默認情況下，開發(fā)者只能訪問與正在展開的行綁定的對象的屬性，但是沒有什么可以阻止開發(fā)者調(diào)用模板中的方法來檢索額外的或相關的數(shù)據(jù)，由“row object’s”屬性驅(qū)動。

例如，在之前的數(shù)據(jù)卡中，只顯示經(jīng)理的員工id并不是一個非常令人滿意的解決方案，相反這個例子使用了一個名為getManagerName的方法，當傳遞給經(jīng)理的id時，返回經(jīng)理的名稱：

<ng-template kendoGridDetailTemplate let-dataItem>
<p><strong>Region:</strong> {{ dataItem.region }} <br/>
<strong>Manager:</strong> {{ getManagerName(dataItem.id }}
</ng-template>

如果想檢索一個完整的相關對象，這樣就可以在模板中顯示多個屬性，開發(fā)者可以利用ng-if指令調(diào)用一個方法來檢索想要的對象。雖然不能將ng-if指令放在ng-template元素上(與展開行的關聯(lián)的dataItem對象對于ng-template元素是不可用的)，但這并不是真正的問題：只需添加一個元素，將所有想要使用返回對象的數(shù)據(jù)卡標記括起來，并將ng-if指令放在元素上。

這個示例將數(shù)據(jù)卡的一部分包含在一個section元素中，該元素使用ng-if調(diào)用一個名為getManagerInfo的方法。該示例還使用as關鍵字為方法返回的對象分配名稱“manager”，然后card顯示該對象的屬性(作為獎勵，如果該方法沒有找到管理器對象并返回null，則使用ng-if也會抑制顯示管理器信息)：

<ng-template kendoGridDetailTemplate let-dataItem>
<strong>Region:</strong> {{ dataItem.region }} <br/>
<section *ngIf="getManagerInfo(dataItem.id) as manager" >
<strong>Manager:</strong><br/>
Id: {{manager.id}} <br/>
Name: {{manager.empName}}
</section>
</ng-template>

有了這個改變，顯示效果會更好：

當然當用戶展開一行時，也可以使用相同的技術從模板中調(diào)用函數(shù)來更新UI的其他部分。

控制展開項

如果希望支持用戶選擇展開哪些行，也可以這樣做，第一步是添加兩個指令到kendo-grid元素：

• expandedDetailKeys：必須指向標識展開行的鍵數(shù)組。
• kendoGridExpandDetailsBy：這必須指向一個返回行對象的鍵屬性的函數(shù)。

每當展開一行時，網(wǎng)格將自動調(diào)用kendoGridExpandDetailsBy函數(shù)，并將返回的key屬性添加到expandedDetailKeys數(shù)組(并在行折疊時刪除鍵)。

將指令添加到網(wǎng)格中，并將它們綁定到函數(shù)(expandDepartments)和數(shù)組(expedddepartments)，得到如下內(nèi)容：

<kendo-grid
[kendoGridExpandDetailsBy]="this.expandDepartments"
[(expandedDetailKeys)]="this.expandedDepartments"
…

對應函數(shù)和數(shù)組的基本實現(xiàn)如下所示：

expandDepartments = (dataItem: Department): string => {
return dataItem.id;
};
expandedDepartments:string[] = [];

到目前為止，添加這些指令并沒有為網(wǎng)格添加任何功能。然而，有了這些指令，例如您可以讓用戶保存一個展開的行列表，展開/折疊其他行，然后返回到原來保存的列表。這兩個方法將當前展開項數(shù)組保存到組件的屬性中，然后通過從保存的數(shù)組中重置網(wǎng)格數(shù)組來恢復該列表：

savedExpandedList:string[] = [];

saveExpandedList()
{
this.savedExpandedList = this.expandedDepartments;
}
restoreExpandedList()
{
this.expandedDepartments = [];
this.savedExpandedList.forEach(d => this.expandedDepartments.push(d));
}

使用這些指令還允許您擴展所選擇的行，以將網(wǎng)格的顯示與UI中發(fā)生的任何其他事情集成在一起。例如，下面的函數(shù)將傳遞給它的部門id添加到展開行的數(shù)組中，從而導致網(wǎng)格中相應的行被展開。

這個實現(xiàn)假設您想要保留任何已展開的行，為了維護現(xiàn)有的展開行，代碼將所有現(xiàn)有項從expandedDepartments數(shù)組復制到一個新數(shù)組，將傳遞的鍵添加到新數(shù)組，然后重置expandedDepartments數(shù)組：

expandSpecifiedDepartment(deptId:string) {
let depts:string[] = [];
this.expandedDepartments.forEach(d => depts.push(d));
depts.push(deptId);
this.expandedDepartments = depts;
}

如果您希望關閉所有現(xiàn)有的展開項，而只顯示傳遞的項，則只需省略函數(shù)中的第二行。

當然，您可以自行決定如何使用此功能。但是現(xiàn)在您不僅可以顯示任何網(wǎng)格項的附加信息，還可以將該功能集成到UI的其余部分。