Kendo UI for jQuery數據管理使用教程：滾動概述

---

Kendo UI for jQuery R1 2020 SP2試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。

默認情況下，將啟用網格的滾動功能。根據啟用的滾動模式、網格尺寸和布局的呈現方式會有所不同。

入門指南

 啟用滾動功能后，該窗口小部件默認情況下呈現兩個表：一個用于標題區域、一個用于可滾動數據區域。當您需要手動對Grid表進行JavaScript或CSS更新時，這兩個表很重要。

<div class="k-widget k-grid">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>...</table>
</div>
</div>
<div class="k-grid-content">
<table>...</table>
</div>
</div>

以下示例通過虛擬滾動展示Grid中的HTML輸出。

<div class="k-widget k-grid">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>...</table>
</div>
</div>
<div class="k-grid-content">
<div class="k-virtual-scrollable-wrap">
<table>...</table>
</div>
</div>
</div>

 但是，為了通過輔助技術實現最大程度的可訪問性，請禁用Grid的滾動功能。 要禁用滾動，請將scrollable選項設置為false。

$("#grid").kendoGrid({
scrollable: false,
// other configuration
});

設置滾動條

 默認情況下，啟用滾動時，網格不顯示滾動條。 要渲染滾動條并實現垂直或水平滾動，請定義網格的以下尺寸，您可以獨立控制垂直和水平滾動。

• 要實現垂直滾動，請設置網格的高度。 否則，它將垂直擴展來顯示所有行。
• 要實現水平滾動，請以像素為單位明確定義所有列的寬度，并確保它們的總和超過Grid的寬度。

 啟用滾動后，即使不需要網格的垂直滾動條也始終可見，這簡化了實現并提高了小部件的性能。要刪除垂直滾動條，請使用CSS規則，并確保Grid及其數據區域均未應用固定的高度，以便它們能夠根據表行數進行收縮和擴展。 在下面的示例中，＃GridID僅允許將樣式應用到特定的Grid實例。 要在所有Grid實例中使用這些樣式，請將ID替換為.k-grid CSS類。

#GridID .k-grid-header
{
padding: 0 !important;
}

#GridID .k-grid-content
{
overflow-y: visible;
}

恢復滾動位置

在某些情況下，小部件反彈時，可能會重置網格的滾動位置。 為防止滾動位置恢復：

1. 將滾動位置保存在dataBinding事件中。
2. 恢復databound事件中的滾動位置。

 可滾動容器是div.k-grid-content，可以將其作為小部件包裝的子元素來檢索。 如果啟用了虛擬滾動，則可滾動數據容器為div.k-virtual-scrollable-wrap，并且僅水平滾動。

$(function () {
// Initialize the variable which will hold the scroll positions.
var scrollOffset = {
left: 0,
top: 0
};

// Save the scroll position before the new data is rendered.
function onGridDataBinding (e) {
var container = e.sender.wrapper.children(".k-grid-content"); // or ".k-virtual-scrollable-wrap"
scrollOffset.left = container.scrollLeft();
scrollOffset.top = container.scrollTop(); // use only if virtual scrolling is disabled
}

// Restore the scroll position after the new data is rendered.
function onGridDataBound (e) {
var container = e.sender.wrapper.children(".k-grid-content"); // or ".k-virtual-scrollable-wrap"
container.scrollLeft(scrollOffset.left);
container.scrollTop(scrollOffset.top); // use only if virtual scrolling is disabled
}

// Attach the Grid event handlers.
$("#grid").kendoGrid({
dataBinding: onGridDataBinding,
dataBound: onGridDataBound
// ...the rest of the code is omitted for brevity...
});
});

縮放時調整滾動條和頁面布局

 縮放網頁時，瀏覽器會更改除滾動條以外的所有頁面的內容大小，這會導致啟用滾動功能的網格中的標題和數據區域之間未對齊。 要調整布局，請在window.resize上執行以下代碼。

注意：如果網格處于從右到左（RTL）模式，請使用“ padding-left”而不是“ padding-right”配置。

var grid = $('#GridID').data('kendoGrid');
grid.thead.closest(".k-grid-header").css("padding-right", kendo.support.scrollbar(true));

掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊