Kendo UI for jQuery網(wǎng)格使用教程：網(wǎng)格概述

Kendo UI for jQuery最新試用版下載

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

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

• DataSource—數(shù)據(jù)源是關(guān)鍵的Kendo UI組件之一，它是使用本地或遠(yuǎn)程數(shù)據(jù)的抽象概念，是理解Grid功能的關(guān)鍵概念。
• 遠(yuǎn)程CRUD操作—通過(guò)Kendo UI數(shù)據(jù)源發(fā)出的HTTP請(qǐng)求從遠(yuǎn)程數(shù)據(jù)服務(wù)檢索數(shù)據(jù)，并將其提交給遠(yuǎn)程數(shù)據(jù)服務(wù)。
• 遠(yuǎn)程數(shù)據(jù)綁定—提供有關(guān)服務(wù)器篩選、分頁(yè)和Grid的其他功能信息。
• Kendo UI編輯功能—某些Kendo UI小部件（包括網(wǎng)格）中的編輯功能是通過(guò)使用Kendo UI MVVM綁定到模型的特定編輯器元素或表單來(lái)實(shí)現(xiàn)。

初始化網(wǎng)格

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

• 使用空的"div"元素
• 使用HTML表格

使用空的"div"元素

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

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

從HTML表初始化Grid時(shí)，窗口小部件使用Kendo UI DataSource實(shí)例。 通過(guò)以下方式提取單元格的內(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í)符。 因此建議使用數(shù)據(jù)字段屬性，否則標(biāo)題的單元格內(nèi)容必須滿足以下要求：
• 沒(méi)有空格
• 無(wú)特殊字符
• 第一個(gè)字符必須是字母

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

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

• id屬性定義列的id。
• data-field屬性定義數(shù)據(jù)字段的名稱。
• width樣式應(yīng)用于各個(gè)"col"元素時(shí)，將設(shè)置列的寬度。
• data-type屬性定義數(shù)據(jù)類型。
• data-template屬性設(shè)置列模板。
• data-menu屬性啟用或禁用列菜單。
• data-sortable屬性啟用或禁用排序。
• data-filterable屬性啟用或禁用過(guò)濾。
• data-groupable屬性啟用或禁用分組。
• data-index屬性為列定義一個(gè)從零開(kāi)始的數(shù)字指示符。

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

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

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

// Define the HTML table with rows, 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>

功能和特點(diǎn)

• 數(shù)據(jù)運(yùn)算
• 數(shù)據(jù)綁定
• 編輯
• 篩選
• 分組
• 分頁(yè)
• 排序
• 導(dǎo)出選項(xiàng)
• Excel
• PDF
• 打印
• 高級(jí)實(shí)現(xiàn)
• 增強(qiáng)列
• 狀態(tài)保持
• 層次結(jié)構(gòu)
• 模板
• 更多設(shè)置
• 滾動(dòng)模式
• 選項(xiàng)
• 渲染和尺寸
• 性能技巧
• 全球化
• 輔助功能

引用現(xiàn)有實(shí)例

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

1. 使用jQuery.data()方法。
2. 建立引用后，請(qǐng)使用Grid API來(lái)控制其操作。

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

了解最新Kendo UI最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊