Kendo UI for jQuery數(shù)據(jù)管理使用教程：自適應(yīng)渲染

---

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

自適應(yīng)渲染

Kendo UI for jQuery通過支持自適應(yīng)增強(qiáng)功能，可在任何設(shè)備上為客戶提供一致的體驗(yàn)。

例如，當(dāng)您在移動設(shè)備上過濾或編輯數(shù)據(jù)時，Kendo UI會在用戶的新屏幕中滑動，這與臺式機(jī)的內(nèi)聯(lián)和彈出操作有所不同。

啟用響應(yīng)式設(shè)計(jì)

要啟用自適應(yīng)渲染功能，請將mobile屬性設(shè)置為true或“ phone”：

• 如果設(shè)置為true，則在移動瀏覽器上查看時，小部件將使用自適應(yīng)渲染。
• 如果設(shè)置為“ phone”，則無論瀏覽器類型如何，都將強(qiáng)制小部件使用自適應(yīng)渲染。

重要提示：對于移動渲染，我們建議也設(shè)置高度選項(xiàng)。 如果不設(shè)置明確的高度，則網(wǎng)格的每個視圖都可能具有不同的高度。

<div id="grid"></div>

<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
editable: true,
columnMenu: true,
height: 550,
mobile: "phone"
});
</script>

在移動設(shè)備上配置面板

放置自適應(yīng)網(wǎng)格的移動面板不會自動擴(kuò)展其高度，要將自適應(yīng)網(wǎng)格添加到Kendo UI移動應(yīng)用程序中，請將各個視圖的拉伸配置設(shè)置為true，然后將100％的高度應(yīng)用于網(wǎng)格?；蛘叨x一個明確的像素網(wǎng)格高度，并省略面板拉伸選項(xiàng)。

重要提示：在Kendo移動應(yīng)用程序中使用網(wǎng)格的自適應(yīng)渲染時，請應(yīng)用我們Less-based的主題。

下面的示例演示如何應(yīng)用Stretch選項(xiàng)。

<div id="foo" data-role="view" data-init="onInit" data-stretch="true">
<div id="grid"></div>
</div>

<script>
var gridConfig = {
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
columnMenu: true,
mobile: "phone",
height: "100%"
};

function onInit() {
$("#grid").kendoGrid(gridConfig);
}

var app = new kendo.mobile.Application();
</script>

下面的示例演示如何應(yīng)用height選項(xiàng)。

<div id="foo" data-role="view" data-init="onInit">
<div id="grid"></div>
</div>

<script>
var gridConfig = {
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
columnMenu: true,
mobile: "phone",
height: "140px" //grid will be 140px height
};

$("#grid").kendoGrid(gridConfig);
</script>

調(diào)整列大小

當(dāng)用戶將手指放在相應(yīng)的列標(biāo)題上時，將觸發(fā)觸摸屏設(shè)備上的列大小調(diào)整功能。 當(dāng)出現(xiàn)調(diào)整大小圖標(biāo)時，用戶可以通過拖動來調(diào)整列的大小。

圖1：在移動設(shè)備上具有可調(diào)整大小的列的網(wǎng)格

破壞自適應(yīng)網(wǎng)格

在自適應(yīng)模式下，網(wǎng)格將生成輔助標(biāo)記，如果要手動銷毀小部件，則需要將其刪除。

手動銷毀網(wǎng)格：

1. 在圍繞Grid小部件創(chuàng)建的最近的.k-pane-wrapper ancestor上調(diào)用kendo.destroy() ；
2. 從DOM中刪除整個.k-pane-wrapper元素。

要重新創(chuàng)建Grid，請?jiān)谧畛醴胖肎rid div的同一位置插入一個新的div。

---

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