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

---

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庫(kù)。

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

入門指南

啟用滾動(dòng)功能后，該窗口小部件默認(rèn)情況下呈現(xiàn)兩個(gè)表：一個(gè)用于標(biāo)題區(qū)域、一個(gè)用于可滾動(dòng)數(shù)據(jù)區(qū)域。當(dāng)您需要手動(dòng)對(duì)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>

以下示例通過(guò)虛擬滾動(dòng)展示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>

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

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

設(shè)置滾動(dòng)條

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

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

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

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

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

恢復(fù)滾動(dòng)位置

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

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

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

$(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)整滾動(dòng)條和頁(yè)面布局

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

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

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

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

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