翻譯|使用教程|編輯:龔雪|2020-09-16 10:26:17.137|閱讀 258 次
概述:Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù),本文將為大家介紹如何自適應(yīng)渲染。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
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ù)。
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)渲染功能,請(qǐng)將mobile屬性設(shè)置為true或“ phone”:
重要提示:對(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>
放置自適應(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)格將生成輔助標(biāo)記,如果要手動(dòng)銷(xiāo)毀小部件,則需要將其刪除。
手動(dòng)銷(xiāo)毀網(wǎng)格:
要重新創(chuàng)建Grid,請(qǐng)?jiān)谧畛醴胖肎rid div的同一位置插入一個(gè)新的div。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)