完整的jQuery UI組件庫Kendo UI for jQuery數(shù)據(jù)管理使用教程：Grid性能的最佳實現(xiàn)

---

Kendo UI for jQuery R2 2020 SP1試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

最佳實現(xiàn)

本文列出了優(yōu)化和提高Grid性能的最佳實現(xiàn)和方法。

• 啟用分頁
• 啟用虛擬化
• 減少數(shù)據(jù)量
• 使用快速瀏覽器

啟用分頁

從理論上講，如果啟用了分頁，則將解決所有性能問題。 將每頁的記錄數(shù)限制為合理的數(shù)量，使您可以實現(xiàn)所有網(wǎng)格功能，而不會影響其性能。 例如，即使每頁顯示20條記錄、每頁顯示50條記錄，結(jié)果會導(dǎo)致1,000個單元格被瀏覽器快速處理。對于更復(fù)雜的情況，例如您需要直接在列模板中而不是在編輯器模板中呈現(xiàn)編輯器，則可以進一步減小pageSize －如果在每個單元格中初始化一個小部件，最終將有1,000個小部件，將是一個重大打擊。

啟用分頁功能后，必須決定是在客戶端還是在服務(wù)器上處理數(shù)據(jù)操作。此方法適用于所有數(shù)據(jù)操作，例如過濾、分組和排序。

在以下情況下使用客戶端操作：

• Grid將顯示有限數(shù)量的記錄，如果記錄數(shù)量增加，則有可能超過maxJsonLength，您可能需要增加該限制。
• 數(shù)據(jù)將基于用戶，并且不會期望其他用戶更新相同的記錄。
• 您希望避免對每個數(shù)據(jù)操作使用單獨的AJAX請求。
• 您需要訪問客戶端上的所有dataItem來進行自定義數(shù)據(jù)操作，要檢索整個數(shù)據(jù)集，請使用dataSource的data方法。

在以下情況下使用服務(wù)器端操作：

• 您擁有大量記錄（多達數(shù)百萬條）。
• 數(shù)據(jù)可以由其他用戶更改，并且在每次數(shù)據(jù)操作之后都需要更新數(shù)據(jù)。
• 您需要使用LINQ在服務(wù)器端執(zhí)行復(fù)雜的表達式，或者當處理從數(shù)據(jù)庫中檢索數(shù)據(jù)的查詢比客戶端dataSource邏輯要快得多時。

啟用虛擬化

虛擬滾動是分頁的一種替代方法，可以在以前呈現(xiàn)的記錄上呈現(xiàn)記錄。 該方法減少了DOM元素，但使用戶能夠平滑滾動數(shù)據(jù)。 您可以將本地綁定或遠程綁定（用于大量數(shù)據(jù)）用于虛擬滾動，當用戶向下滾動記錄時，將啟動用于檢索下一個視圖的新請求。

減少數(shù)據(jù)量

通過使用外部或初始過濾器減少數(shù)據(jù)量與Grid不直接相關(guān)，而是處理大量數(shù)據(jù)的通用方法。 概念是實施其他篩選條件，以減少綁定到網(wǎng)格的記錄。 一些項目允許使用外部過濾器小部件，例如DropDownList，并且它們的選定值用于在將數(shù)據(jù)傳遞到Grid之前對其進行過濾。 例如，如果您有來自不同公司的數(shù)百萬個訂單，則可以使用所有公司的外部DropDownList列表，然后在dataSource的讀取數(shù)據(jù)操作中將當前選擇的一個應(yīng)用為附加參數(shù)。 這樣，您可以應(yīng)用初始過濾器，僅返回該公司的訂單。

為了減少數(shù)據(jù)量，您還可以為Grid的dataSource中的特定字段設(shè)置初始過濾條件。 但是，如果啟用了過濾并且綁定到該字段的列是可見的，則用戶將能夠刪除它。

使用快速瀏覽器

Internet Explorer會慢慢處理頁面上使用太多DOM元素和事件偵聽器的窗口小部件。 在Kendo UI小部件的上下文中，使用Chrome可提供最佳的用戶體驗。

---

了解最新Kendo UI最新資訊，請關(guān)注Telerik中文網(wǎng)！