Kendo UI for jQuery數(shù)據(jù)管理使用教程：滾動概述

---

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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

默認(rèn)情況下，將啟用網(wǎng)格的滾動功能。根據(jù)啟用的滾動模式、網(wǎng)格尺寸和布局的呈現(xiàn)方式會有所不同。

入門指南

啟用滾動功能后，該窗口小部件默認(rèn)情況下呈現(xiàn)兩個(gè)表：一個(gè)用于標(biāo)題區(qū)域、一個(gè)用于可滾動數(shù)據(jù)區(qū)域。當(dāng)您需要手動對Grid表進(jìn)行JavaScript或CSS更新時(shí)，這兩個(gè)表很重要。

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

但是，為了通過輔助技術(shù)實(shí)現(xiàn)最大程度的可訪問性，請禁用Grid的滾動功能。 要禁用滾動，請將scrollable選項(xiàng)設(shè)置為false。

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

設(shè)置滾動條

默認(rèn)情況下，啟用滾動時(shí)，網(wǎng)格不顯示滾動條。 要渲染滾動條并實(shí)現(xiàn)垂直或水平滾動，請定義網(wǎng)格的以下尺寸，您可以獨(dú)立控制垂直和水平滾動。

• 要實(shí)現(xiàn)垂直滾動，請?jiān)O(shè)置網(wǎng)格的高度。 否則，它將垂直擴(kuò)展來顯示所有行。
• 要實(shí)現(xiàn)水平滾動，請以像素為單位明確定義所有列的寬度，并確保它們的總和超過Grid的寬度。

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

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

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

恢復(fù)滾動位置

在某些情況下，小部件反彈時(shí)，可能會重置網(wǎng)格的滾動位置。 為防止?jié)L動位置恢復(fù)：

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

可滾動容器是div.k-grid-content，可以將其作為小部件包裝的子元素來檢索。 如果啟用了虛擬滾動，則可滾動數(shù)據(jù)容器為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...
});
});

縮放時(shí)調(diào)整滾動條和頁面布局

縮放網(wǎng)頁時(shí)，瀏覽器會更改除滾動條以外的所有頁面的內(nèi)容大小，這會導(dǎo)致啟用滾動功能的網(wǎng)格中的標(biāo)題和數(shù)據(jù)區(qū)域之間未對齊。 要調(diào)整布局，請?jiān)趙indow.resize上執(zhí)行以下代碼。

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

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

掃描關(guān)注慧聚IT微信公眾號，及時(shí)獲取最新動態(tài)及最新資訊