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

自適應(yīng)渲染

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

例如，當(dāng)您在移動(dòng)設(shè)備上過(guò)濾或編輯數(shù)據(jù)時(shí)，Kendo UI會(huì)在用戶(hù)的新屏幕中滑動(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”，則無(wú)論瀏覽器類(lèi)型如何，都將強(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)格。或者定義一個(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)用戶(hù)將手指放在相應(yīng)的列標(biāo)題上時(shí)，將觸發(fā)觸摸屏設(shè)備上的列大小調(diào)整功能。 當(dāng)出現(xiàn)調(diào)整大小圖標(biāo)時(shí)，用戶(hù)可以通過(guò)拖動(dòng)來(lái)調(diào)整列的大小。

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

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

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

手動(dòng)銷(xiāo)毀網(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。