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

Kendo UI Grid提供模板引擎和內(nèi)置的DataSource，可讓您快速設(shè)置和實現(xiàn)數(shù)據(jù)綁定功能。

 

 

入門指南

要將網(wǎng)格綁定到遠程數(shù)據(jù)，請指定dataSource選項。您可以在小部件外部創(chuàng)建數(shù)據(jù)源，也可以在其中傳遞數(shù)據(jù)源。如果多個窗口小部件綁定到同一數(shù)據(jù)集，則必須將數(shù)據(jù)源創(chuàng)建為可以在不同窗口小部件中引用的對象。如果網(wǎng)格是綁定到數(shù)據(jù)的唯一項目，請內(nèi)聯(lián)創(chuàng)建。

$("#grid").kendoGrid({
dataSource: {
transport: {
read: "/Home/People.json"
},
schema: {
data: "data"
}
}
});

 

配置數(shù)據(jù)源

Kendo UI提供一個數(shù)據(jù)綁定框架，可以通過定義窗口小部件的dataSource并提供遠程端點來與Grid內(nèi)聯(lián)使用。

下面的示例演示如何實現(xiàn)建議的方法。在示例中：

· dataSource創(chuàng)建一個新的Kendo UI DataSource并將其分配為Grid的數(shù)據(jù)源。

· transport定義您與遠程數(shù)據(jù)源進行通信的方式。

· URL指向您要將小部件綁定到的數(shù)據(jù)位置。

· data列出需要發(fā)送到遠程端點的其他URL參數(shù)。

· dataType指示期望數(shù)據(jù)源使用的響應(yīng)格式（在示例中為JSONP）。JSONP是一種從跨瀏覽器請求返回JSON而不會被阻塞的方法，它將JSON響應(yīng)包裝在回調(diào)中，以故意誤導(dǎo)瀏覽器。但是除非您完全了解其中包含的數(shù)據(jù)，否則不建議這樣做。

· schema向Grid指示響應(yīng)的模式是什么。

· data函數(shù)用作將要重復(fù)的JSON元素 – Kendo UI基于此元素將Grid中的每一行綁定到此元素中的項目，服務(wù)器將數(shù)據(jù)作為項目數(shù)組返回，因此重復(fù)項為"items"。

· model 描述了數(shù)據(jù)結(jié)構(gòu)，通過使用它，您可以指定數(shù)據(jù)中每個字段的數(shù)據(jù)類型來進行適當(dāng)處理，并在需要時顯示聲明唯一ID字段。

 

 

 

 

添加數(shù)據(jù)

前面的示例使用自動生成的列呈現(xiàn)一個Grid，并為數(shù)據(jù)項中的每個字段提供一列。要只在網(wǎng)格中顯示所需的字段，請?zhí)峁┝辛斜恚⒅付ū仨氃诿總€特定的列中顯示服務(wù)器響應(yīng)中items數(shù)組的哪個元素。

下面的示例演示如何在列數(shù)組中指定field屬性，以便Grid顯示響應(yīng)中所需的數(shù)據(jù)。列還具有title屬性，該屬性為列提供了更加用戶友好的標(biāo)題。

 

 

 

處理可視化

網(wǎng)格不顯示Image列中的圖像，而是呈現(xiàn)JavaScript對象的字符串輸出，并且日期也不以用戶友好的格式顯示。

下面的示例演示如何通過使用圖像的嵌入式模板向Grid指示您希望小部件顯示Image列的方式，通過使用列的format選項，可以正確格式化日期。

 

 

 

設(shè)置行模板

您可以為網(wǎng)格中的列顯示更復(fù)雜的模板（例如，單個列中有多個字段值），同時迭代其他列的內(nèi)容以生成模板輸出。在這種情況下，使用rowTemplate描述單個模板中整個行的結(jié)構(gòu)。

下面的示例演示如何通過對網(wǎng)格應(yīng)用其他樣式來完全自定義網(wǎng)格，模板中td元素的數(shù)量與Grid定義中的列數(shù)匹配。

注意：以下示例中的html代碼顯示特殊的腳本塊，其中包含Kendo UI模板的模板語法。所使用的JavaScript也與HTML內(nèi)容混合在一起，并且模板的語法類似于在PHP，Razor或其他服務(wù)器端模板引擎的創(chuàng)建中應(yīng)用的語法。