Kendo UI for jQuery網格使用教程：網格概述

Kendo UI for jQuery最新試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。

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

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

• DataSource—數據源是關鍵的Kendo UI組件之一，它是使用本地或遠程數據的抽象概念，是理解Grid功能的關鍵概念。
• 遠程CRUD操作—通過Kendo UI數據源發出的HTTP請求從遠程數據服務檢索數據，并將其提交給遠程數據服務。
• 遠程數據綁定—提供有關服務器篩選、分頁和Grid的其他功能信息。
• Kendo UI編輯功能—某些Kendo UI小部件（包括網格）中的編輯功能是通過使用Kendo UI MVVM綁定到模型的特定編輯器元素或表單來實現。

初始化網格

要初始化網格，請使用以下兩種方法：

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

使用空的"div"元素

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

// 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時，可以從表結構和元素的HTML屬性推斷出其某些設置，這意味著您可以完全在表格的HTML中描述Grid布局。HTML表通常已經填充數據，從而改善了可訪問性和搜索引擎優化，并確保即使禁用JavaScript或頁面上出現JavaScript錯誤，用戶也可以看到數據。

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

1. 數據源中數據字段的名稱是根據標題單元格的內容或標題單元格的數據字段屬性創建的。
2. 數據字段的名稱必須是有效的JavaScript標識符。 因此建議使用數據字段屬性，否則標題的單元格內容必須滿足以下要求：
• 沒有空格
• 無特殊字符
• 第一個字符必須是字母

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

從現有表創建網格時，網格提供了以下列設置，可以通過HTML屬性來定義。 除width列樣式外，所有屬性都必須應用于"th"元素：

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

注意：要將單元格的aria- describeby屬性關聯到可導航的Kendo UI網格相應列標題，請為每個"th"元素定義id和data-index屬性。

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

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

// 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>

功能和特點

• 數據運算
• 數據綁定
• 編輯
• 篩選
• 分組
• 分頁
• 排序
• 導出選項
• Excel
• PDF
• 打印
• 高級實現
• 增強列
• 狀態保持
• 層次結構
• 模板
• 更多設置
• 滾動模式
• 選項
• 渲染和尺寸
• 性能技巧
• 全球化
• 輔助功能

引用現有實例

要引用現有的Grid實例：

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

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

掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊