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

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

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

Kendo UI R1 2023正式版下載

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

顯示其他詳細(xì)信息

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

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

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

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

例如，這個(gè)標(biāo)記顯示了部門的區(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)格(其中一行展開)看起來像這樣：

獲取相關(guān)數(shù)據(jù)

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

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

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

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

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

<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>

有了這個(gè)改變，顯示效果會(huì)更好：

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

控制展開項(xiàng)

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

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

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

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

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

對(duì)應(yīng)函數(shù)和數(shù)組的基本實(shí)現(xiàn)如下所示：

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

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

savedExpandedList:string[] = [];

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

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

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

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

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

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