文檔首頁>>telerik中文文檔>>第一步
第一步
剛剛開始接觸Kendo UI for jQuery？ 免費(fèi)下載30天試用版
本指南演示了如何通過添加資源并初始化Kendo UI Grid來開始使用Kendo UI for jQuery 。
該過程分為以下幾個(gè)步驟：
注意：Visual Studio Code 的用戶可以使用 Kendo UI 的工具來加快項(xiàng)目創(chuàng)建速度。
1.下載控件
登錄Telerik賬戶后，您可以快速下載 Kendo UI for jQuery 控件。
2. 添加所需的 JavaScript 和 CSS 文件
首先。您需要將 Kendo UI 資源添加到 HTML 文檔中。在此示例中，您將使用Kendo UI CDN 服務(wù)。在其他情況下，您可能會有想在本地托管文件的需求。
您需要在 Kendo UI 腳本之前注冊 jQuery，否則，當(dāng)您嘗試初始化 Kendo UI 組件或使用 Kendo UI API 時(shí)，您將收到Javascript錯(cuò)誤提醒。
為了確保加載所有腳本，請您使用API 調(diào)來呈現(xiàn)Kendo UI版本。
提示：該$(function() { });代碼塊是一個(gè)jQuery document.ready處理程序。本指南中的所有 JavaScript 代碼都必須放入。
```html <link rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <!-- Add the Kendo library by either using the JAVASCRIPT MODULES --> <script src="https://kendo.cdn.telerik.com/2023.2.606/mjs/kendo.all.js" type="module"></script> <!-- OR by using the BUNDLED JAVASCRIPT --> <script src="https://kendo.cdn.telerik.com/2023.2.606/js/kendo.all.min.js"></script> ```
3. 將網(wǎng)格綁定到數(shù)據(jù)
現(xiàn)在，您將使用虛擬訂單來創(chuàng)建一個(gè)Kendo UI 數(shù)據(jù)源，稍后可以使用這些虛擬訂單來綁定網(wǎng)格。
硬編碼的數(shù)據(jù)項(xiàng)數(shù)組是創(chuàng)建數(shù)據(jù)源的最簡單方法。在現(xiàn)實(shí)場景中，您需要獲取遠(yuǎn)程數(shù)據(jù)或者配置編輯（CRUD操作）。
為了保證數(shù)據(jù)操作的正確執(zhí)行，您需要配置數(shù)據(jù)字段類型。此外，您將通過頁面大小和按照OrderDate進(jìn)行默認(rèn)排序。
var orderData = [
{ OrderID: 1, OrderDate: "2017-11-06T12:00:00", Freight: 12.34, ShipCity: "Antwerp", ShipCountry: "Belgium" },
{ OrderID: 2, OrderDate: "2019-03-02T12:00:00", Freight: 23.45, ShipCity: "Singapore", ShipCountry: "Singapore" },
{ OrderID: 3, OrderDate: "2019-06-26T12:00:00", Freight: 34.56, ShipCity: "Shanghai", ShipCountry: "China" },
{ OrderID: 4, OrderDate: "2017-09-20T12:00:00", Freight: 45.67, ShipCity: "Hamburg", ShipCountry: "Germany" },
{ OrderID: 5, OrderDate: "2017-12-12T12:00:00", Freight: 56.78, ShipCity: "Mumbai", ShipCountry: "India" },
{ OrderID: 6, OrderDate: "2018-02-08T12:00:00", Freight: 67.89, ShipCity: "Shanghai", ShipCountry: "China" },
{ OrderID: 7, OrderDate: "2018-05-05T12:00:00", Freight: 78.90, ShipCity: "Tokyo", ShipCountry: "Japan" },
{ OrderID: 8, OrderDate: "2019-08-03T12:00:00", Freight: 89.01, ShipCity: "Port Klang", ShipCountry: "Malaysia" },
{ OrderID: 9, OrderDate: "2018-10-29T12:00:00", Freight: 90.12, ShipCity: "Rotterdam", ShipCountry: "Netherlands" },
{ OrderID: 10, OrderDate: "2018-01-23T12:00:00", Freight: 10.32, ShipCity: "Vancouver", ShipCountry: "Canada" },
{ OrderID: 11, OrderDate: "2018-04-17T12:00:00", Freight: 21.43, ShipCity: "Colón", ShipCountry: "Panama" },
{ OrderID: 12, OrderDate: "2017-07-11T12:00:00", Freight: 32.54, ShipCity: "Manila", ShipCountry: "Philippines" },
{ OrderID: 13, OrderDate: "2017-10-24T12:00:00", Freight: 43.65, ShipCity: "Singapore", ShipCountry: "Singapore" },
{ OrderID: 14, OrderDate: "2018-03-11T12:00:00", Freight: 54.76, ShipCity: "Busan", ShipCountry: "South Korea" },
{ OrderID: 15, OrderDate: "2018-06-17T12:00:00", Freight: 65.87, ShipCity: "Shenzhen", ShipCountry: "China" },
{ OrderID: 16, OrderDate: "2018-10-13T12:00:00", Freight: 76.98, ShipCity: "Hong Kong", ShipCountry: "China" },
{ OrderID: 17, OrderDate: "2019-04-19T12:00:00", Freight: 87.09, ShipCity: "Dubai", ShipCountry: "UAE" },
{ OrderID: 18, OrderDate: "2019-07-25T12:00:00", Freight: 98.21, ShipCity: "Felixstowe", ShipCountry: "UK" },
{ OrderID: 19, OrderDate: "2017-09-22T12:00:00", Freight: 13.24, ShipCity: "Los Angeles", ShipCountry: "USA" },
{ OrderID: 20, OrderDate: "2018-12-09T12:00:00", Freight: 35.46, ShipCity: "New York", ShipCountry: "USA" },
{ OrderID: 21, OrderDate: "2018-02-04T12:00:00", Freight: 57.68, ShipCity: "Guangzhou", ShipCountry: "China" },
{ OrderID: 22, OrderDate: "2019-05-16T12:00:00", Freight: 9.87, ShipCity: "Long Beach", ShipCountry: "USA" },
{ OrderID: 23, OrderDate: "2019-08-18T12:00:00", Freight: 24.13, ShipCity: "Singapore", ShipCountry: "Singapore" }
];
var gridDataSource = new kendo.data.DataSource({
data: orderData,
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
OrderDate: { type: "date" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
sort: {
field: "OrderDate",
dir: "desc"
}
});
4.初始化網(wǎng)格
現(xiàn)在您已準(zhǔn)備好初始化Kendo UI Grid。首先，您可以在頁面上添加一個(gè)新元素。
<div id="ordersGrid"></div>
以下代碼片段包含將創(chuàng)建組件實(shí)力并使用定義的數(shù)據(jù)源的 JavaScript 代碼，將代碼放在gridDataSource定義之后。
有關(guān)當(dāng)前步驟之后頁面的可運(yùn)行版本，請參閱此演示。
$("#ordersGrid").kendoGrid({
dataSource: gridDataSource
});
5.配置網(wǎng)格
此時(shí)，您已經(jīng)填充了 Kendo UI 網(wǎng)格。但是，您需要改進(jìn)和完善其性能，例如：
定義用戶友好的列標(biāo)題和寬度。
定義高度并啟用滾動，以便網(wǎng)格不能無限擴(kuò)展。
以下示例演示了更新后的網(wǎng)格配置。
$("#ordersGrid").kendoGrid({
dataSource: gridDataSource,
height: 400,
pageable: true,
sortable: true,
filterable: true,
columns: [{
field:"OrderID",
title: "Order ID",
width: 160
}, {
field: "Freight",
width: 160,
}, {
field: "OrderDate",
title: "Order Date",
width: 200,
}, {
field: "ShipCountry",
title: "Ship Country"
}, {
field: "ShipCity",
title: "Ship City"
}]
});
下面的可運(yùn)行示例演示了您將根據(jù)本教程創(chuàng)建和構(gòu)建的頁面的最終版本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started with Kendo UI for jQuery</title>
<link rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2023.2.606/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.606/js/kendo.all.min.js"></script>
</head>
<body>
<div id="ordersGrid"></div>
<script>
$(function() {
var orderData = [
{ OrderID: 1, OrderDate: "2017-11-06T12:00:00", Freight: 12.34, ShipCity: "Antwerp", ShipCountry: "Belgium" },
{ OrderID: 2, OrderDate: "2019-03-02T12:00:00", Freight: 23.45, ShipCity: "Singapore", ShipCountry: "Singapore" },
{ OrderID: 3, OrderDate: "2019-06-26T12:00:00", Freight: 34.56, ShipCity: "Shanghai", ShipCountry: "China" },
{ OrderID: 4, OrderDate: "2017-09-20T12:00:00", Freight: 45.67, ShipCity: "Hamburg", ShipCountry: "Germany" },
{ OrderID: 5, OrderDate: "2017-12-12T12:00:00", Freight: 56.78, ShipCity: "Mumbai", ShipCountry: "India" },
{ OrderID: 6, OrderDate: "2018-02-08T12:00:00", Freight: 67.89, ShipCity: "Shanghai", ShipCountry: "China" },
{ OrderID: 7, OrderDate: "2018-05-05T12:00:00", Freight: 78.90, ShipCity: "Tokyo", ShipCountry: "Japan" },
{ OrderID: 8, OrderDate: "2019-08-03T12:00:00", Freight: 89.01, ShipCity: "Port Klang", ShipCountry: "Malaysia" },
{ OrderID: 9, OrderDate: "2018-10-29T12:00:00", Freight: 90.12, ShipCity: "Rotterdam", ShipCountry: "Netherlands" },
{ OrderID: 10, OrderDate: "2018-01-23T12:00:00", Freight: 10.32, ShipCity: "Vancouver", ShipCountry: "Canada" },
{ OrderID: 11, OrderDate: "2018-04-17T12:00:00", Freight: 21.43, ShipCity: "Colón", ShipCountry: "Panama" },
{ OrderID: 12, OrderDate: "2017-07-11T12:00:00", Freight: 32.54, ShipCity: "Manila", ShipCountry: "Philippines" },
{ OrderID: 13, OrderDate: "2017-10-24T12:00:00", Freight: 43.65, ShipCity: "Singapore", ShipCountry: "Singapore" },
{ OrderID: 14, OrderDate: "2018-03-11T12:00:00", Freight: 54.76, ShipCity: "Busan", ShipCountry: "South Korea" },
{ OrderID: 15, OrderDate: "2018-06-17T12:00:00", Freight: 65.87, ShipCity: "Shenzhen", ShipCountry: "China" },
{ OrderID: 16, OrderDate: "2018-10-13T12:00:00", Freight: 76.98, ShipCity: "Hong Kong", ShipCountry: "China" },
{ OrderID: 17, OrderDate: "2019-04-19T12:00:00", Freight: 87.09, ShipCity: "Dubai", ShipCountry: "UAE" },
{ OrderID: 18, OrderDate: "2019-07-25T12:00:00", Freight: 98.21, ShipCity: "Felixstowe", ShipCountry: "UK" },
{ OrderID: 19, OrderDate: "2017-09-22T12:00:00", Freight: 13.24, ShipCity: "Los Angeles", ShipCountry: "USA" },
{ OrderID: 20, OrderDate: "2018-12-09T12:00:00", Freight: 35.46, ShipCity: "New York", ShipCountry: "USA" },
{ OrderID: 21, OrderDate: "2018-02-04T12:00:00", Freight: 57.68, ShipCity: "Guangzhou", ShipCountry: "China" },
{ OrderID: 22, OrderDate: "2019-05-16T12:00:00", Freight: 9.87, ShipCity: "Long Beach", ShipCountry: "USA" },
{ OrderID: 23, OrderDate: "2019-08-18T12:00:00", Freight: 24.13, ShipCity: "Singapore", ShipCountry: "Singapore" }
];
var gridDataSource = new kendo.data.DataSource({
data: orderData,
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
OrderDate: { type: "date" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
sort: {
field: "OrderDate",
dir: "desc"
}
});
$("#ordersGrid").kendoGrid({
dataSource: gridDataSource,
height: 400,
pageable: true,
sortable: true,
filterable: true,
columns: [{
field:"OrderID",
title: "Order ID",
width: 160
}, {
field: "OrderDate",
title: "Order Date",
width: 200,
format: "{0:dd MMMM yyyy}"
}, {
field: "ShipCountry",
title: "Ship Country"
}, {
field: "ShipCity",
title: "Ship City"
}]
});
});
</script>
</body>
</html>
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
提供CDN加速/云存儲服務(wù)
客服熱線