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是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

Kendo UI Grid是用于以表格格式顯示數(shù)據(jù)的強(qiáng)大控件。它提供用于執(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的其他功能信息。
• Kendo UI編輯功能—某些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 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時，可以從表結(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)容必須滿足以下要求：
• 沒有空格
• 無特殊字符
• 第一個字符必須是字母

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

引用現(xiàn)有實例

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

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

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

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