第一步

---

剛剛開始接觸Kendo UI for jQuery？ 免費下載30天試用版

本指南演示了如何通過添加資源并初始化Kendo UI Grid來開始使用Kendo UI for jQuery 。

該過程分為以下幾個步驟：

注意：Visual Studio Code 的用戶可以使用 Kendo UI 的工具來加快項目創建速度。

1.下載控件

登錄后，您可以快速下載 Kendo UI for jQuery 控件。

2. 添加所需的 JavaScript 和 CSS 文件

首先。您需要將 Kendo UI 資源添加到 HTML 文檔中。在此示例中，您將使用。在其他情況下，您可能會有的需求。

您需要在 Kendo UI 腳本之前注冊 jQuery，否則，當您嘗試初始化 Kendo UI 組件或使用 Kendo UI API 時，您將收到Javascript錯誤提醒。

為了確保加載所有腳本，請您使用API 調來呈現。

提示：該$(function() { });代碼塊是一個j處理程序。本指南中的所有 JavaScript 代碼都必須放入。

```html
<link  rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>

<!-- Add the Kendo library by either using the JAVASCRIPT MODULES -->
<script src="http://kendo.cdn.telerik.com/2023.2.606/mjs/kendo.all.js" type="module"></script>

<!-- OR by using the BUNDLED JAVASCRIPT -->
<script src="http://kendo.cdn.telerik.com/2023.2.606/js/kendo.all.min.js"></script>
```

3. 將網格綁定到數據

現在，您將使用虛擬訂單來創建一個，稍后可以使用這些虛擬訂單來綁定網格。

硬編碼的數據項數組是創建數據源的最簡單方法。在現實場景中，您需要獲取或者配置。

為了保證數據操作的正確執行，您需要配置。此外，您將通過和按照OrderDate進行默認。

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.初始化網格

現在您已準備好初始化。首先，您可以在頁面上添加一個新元素。

<div id="ordersGrid"></div>

以下代碼片段包含將并使用定義的數據源的 JavaScript 代碼，將代碼放在gridDataSource定義之后。

有關當前步驟之后頁面的可運行版本，請參閱。

$("#ordersGrid").kendoGrid({
dataSource: gridDataSource
});

5.配置網格

此時，您已經填充了 Kendo UI 網格。但是，您需要改進和完善其性能，例如：

定義用戶友好的列標題和。

啟用數據操作——、和。

定義高度并啟用，以便網格不能無限擴展。

以下示例演示了更新后的網格配置。

$("#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"
}]
});

下面的可運行示例演示了您將根據本教程創建和構建的頁面的最終版本。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started with Kendo UI for jQuery</title>

<link rel="stylesheet"  />

<script src="http://kendo.cdn.telerik.com/2023.2.606/js/jquery.min.js"></script>
<script src="http://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>