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

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

 

 

入門指南

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

 

 

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

 

 

但是，為了較大程度的可訪問性，請禁用Grid的滾動功能。 要禁用滾動，請將scrollable選項設(shè)置為false。

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

 

設(shè)置滾動條

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

• 要實現(xiàn)垂直滾動，請設(shè)置網(wǎng)格的高度。 否則，它將垂直擴(kuò)展來顯示所有行。

• 要實現(xiàn)水平滾動，請以像素為單位明確定義所有列的寬度，并確保它們的總和超過Grid的寬度。

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

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

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

 

恢復(fù)滾動位置

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

 

• 將滾動位置保存在dataBinding事件中。

• 恢復(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…
});
});

 

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

縮放網(wǎng)頁時，瀏覽器會更改除滾動條以外的所有頁面的內(nèi)容大小，這會導(dǎo)致啟用滾動功能的網(wǎng)格中的標(biāo)題和數(shù)據(jù)區(qū)域之間未對齊。 要調(diào)整布局，請在window.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));