Kendo UI目前最新提供Kendo UI forjQuery、Kendo UI forAngular、Kendo UISupport for React和Kendo UISupport for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

KendoUI Grid是用于以表格格式顯示數(shù)據(jù)的強大控件。它提供用于執(zhí)行數(shù)據(jù)操作的選項，例如分頁、排序、過濾、分組和編輯，這些選項確定數(shù)據(jù)顯示和處理方式。通過使用Kendo UI for jQuery DataSource組件，網(wǎng)格支持將數(shù)據(jù)綁定到本地和遠(yuǎn)程數(shù)據(jù)集。

由于其支持的眾多功能，因此Grid是Kendo UI小部件中最復(fù)雜的。為確保使用該部件，請熟悉以下概念：

· DataSource—數(shù)據(jù)源是關(guān)鍵的Kendo UI組件之一，它是使用本地或遠(yuǎn)程數(shù)據(jù)的抽象概念，是理解Grid功能的關(guān)鍵概念。

· 遠(yuǎn)程CRUD操作—通過Kendo UI數(shù)據(jù)源發(fā)出的HTTP請求從遠(yuǎn)程數(shù)據(jù)服務(wù)檢索數(shù)據(jù)，并將其提交給遠(yuǎn)程數(shù)據(jù)服務(wù)。

· 遠(yuǎn)程數(shù)據(jù)綁定—提供有關(guān)服務(wù)器篩選、分頁和Grid的其他功能信息。

· KendoUI編輯功能—某些Kendo UI小部件（包括網(wǎng)格）中的編輯功能是通過使用Kendo UI MVVM綁定到模型的特定編輯器元素或表單來實現(xiàn)。

 

初始化網(wǎng)格

要初始化網(wǎng)格，請使用以下兩種方法：

· 使用空的"div"元素

· 使用HTML表格

 

使用空的"div"元素

當(dāng)從空的"div"元素初始化Grid時，初始化腳本語句中將提供所有Grid設(shè)置，這意味著您必須使用JavaScript描述網(wǎng)格的布局和配置。

// Define the HTML div that willcontain the Grid.
<div id="grid"></div>

// Initialize the Grid.
<script>

$(document).ready(function(){
$("#grid").kendoGrid({
columns: [{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
}],
dataSource: {
data: [{
FirstName: "Joe",
LastName: "Smith"
},
{
FirstName: "Jane",
LastName: "Smith"
}]
}
});
});

</script>

 

使用HTML表格

從HTML表初始化Grid時，可以從表結(jié)構(gòu)和元素的HTML屬性推斷出其某些設(shè)置，這意味著您可以完全在表格的HTML中描述Grid布局。HTML表通常已經(jīng)填充數(shù)據(jù)，從而改善了可訪問性和搜索引擎優(yōu)化，并確保即使禁用JavaScript或頁面上出現(xiàn)JavaScript錯誤，用戶也可以看到數(shù)據(jù)。

從HTML表初始化Grid時，窗口小部件使用Kendo UI DataSource實例。通過以下方式提取單元格的內(nèi)容并填充數(shù)據(jù)源：

1.   數(shù)據(jù)源中數(shù)據(jù)字段的名稱是根據(jù)標(biāo)題單元格的內(nèi)容或標(biāo)題單元格的數(shù)據(jù)字段屬性創(chuàng)建的。

2.   數(shù)據(jù)字段的名稱必須是有效的JavaScript標(biāo)識符。因此建議使用數(shù)據(jù)字段屬性，否則標(biāo)題的單元格內(nèi)容必須滿足以下要求：

o    沒有空格

o    無特殊字符

o    第一個字符必須是字母

如果從HTML表創(chuàng)建Grid，但將DataSource配置為使用傳輸和遠(yuǎn)程操作，則即使該表可能已經(jīng)填充，也會對初始Grid狀態(tài)發(fā)出遠(yuǎn)程請求。此操作是由設(shè)計定義的，除非使用Grid的MVC封裝器，否則無法避免。

從現(xiàn)有表創(chuàng)建網(wǎng)格時，網(wǎng)格提供了以下列設(shè)置，可以通過HTML屬性來定義。除width列樣式外，所有屬性都必須應(yīng)用于"th"元素：

· id屬性定義列的id。

· data-field屬性定義數(shù)據(jù)字段的名稱。

· width樣式應(yīng)用于各個"col"元素時，將設(shè)置列的寬度。

· data-type屬性定義數(shù)據(jù)類型。

· data-template屬性設(shè)置列模板。

· data-menu屬性啟用或禁用列菜單。

· data-sortable屬性啟用或禁用排序。

· data-filterable屬性啟用或禁用過濾。

· data-groupable屬性啟用或禁用分組。

· data-index屬性為列定義一個從零開始的數(shù)字指示符。

注意：要將單元格的aria- describeby屬性關(guān)聯(lián)到可導(dǎo)航的Kendo UI網(wǎng)格相應(yīng)列標(biāo)題，請為每個"th"元素定義id和data-index屬性。

無法通過"table"中的HTML屬性定義其他與列相關(guān)的設(shè)置。如果您必須使用命令、鎖定、編輯器、自定義行、單元格CSS類等設(shè)置，請?zhí)^上述屬性配置，并將所有設(shè)置包括在Grid的JavaScript初始化語句中。請注意，在使用聲明性小部件初始化時，必須通過data-columns屬性設(shè)置列屬性。

如之前和下面的示例所示，在第一種情況下，Grid的客戶端對象被附加到"div"，在第二種情況下被附加到"table"。但是網(wǎng)格生成的HTML輸出完全取決于窗口小部件的設(shè)置，并且無論窗口小部件的初始化方式如何，它始終是相同的。

// Define the HTML table withrows, columns, and data.
<table id="grid">
<colgroup>
<col />
<col style="width:100px" />
</colgroup>
<thead>
<tr>
<th data-field="title" data-filterable="false">Title</th>
<th data-field="year" data-type="number"data-template="<strong>#=year#</strong>">Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star Wars: A New Hope</td>
<td>1977</td>
</tr>
<tr>
<td>Star Wars: The Empire Strikes Back</td>
<td>1980</td>
</tr>
</tbody>
</table>

// Initialize the Grid.
<script>

$(document).ready(function(){
$("#grid").kendoGrid({
sortable: true,
filterable: true
});
});

</script>

 

功能和特點

· 數(shù)據(jù)運算

o    數(shù)據(jù)綁定

o    編輯

o    篩選

o    分組

o    分頁

o    排序

· 導(dǎo)出選項

o    Excel

o    PDF

o    打印

· 高級實現(xiàn)

o    增強列

o    狀態(tài)保持

o    層次結(jié)構(gòu)

o    模板

· 更多設(shè)置

o    滾動模式

o    選項

o    渲染和尺寸

o    性能技巧

o    全球化

o    輔助功能

 

引用現(xiàn)有實例

要引用現(xiàn)有的Grid實例：

1.   使用jQuery.data()方法。

2.   建立引用后，請使用Grid API來控制其操作。

vargrid = $("#grid").data("kendoGrid");