Web界面開發(fā)工具Kendo UI是怎樣自適應(yīng)渲染

Web界面開發(fā)工具Kendo UI是怎樣自適應(yīng)渲染，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

自適應(yīng)渲染

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

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

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

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

• 如果設(shè)置為true，則在移動(dòng)瀏覽器上查看時(shí)，小部件將使用自適應(yīng)渲染。

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

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

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

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

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

重要提示：在Kendo移動(dòng)應(yīng)用程序中使用網(wǎng)格的自適應(yīng)渲染時(shí)，請(qǐ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)題上時(shí)，將觸發(fā)觸摸屏設(shè)備上的列大小調(diào)整功能。 當(dāng)出現(xiàn)調(diào)整大小圖標(biāo)時(shí)，用戶可以通過拖動(dòng)來調(diào)整列的大小。

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

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

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

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

1. 在圍繞Grid小部件創(chuàng)建的最近的.k-pane-wrapper ancestor上調(diào)用kendo.destroy() ；

2. 從DOM中刪除整個(gè).k-pane-wrapper元素。

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

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。