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

Kendo UI目前最新提供Kendo UI forjQuery、Kendo UI forAngular、Kendo UISupport for React和Kendo UISupport for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的完整UI库。

KendoUI Grid是用于以表格格式显示数据的强大控件。它提供用于执行数据操作的选项，例如分页、排序、过滤、分组和编辑，这些选项确定数据显示和处理方式。通过使用Kendo UI for jQuery DataSource组件，网格支持将数据绑定到本地和远程数据集。

由于其支持的众多功能，因此Grid是Kendo UI小部件中最复杂的。为确保使用该部件，请熟悉以下概念：

· DataSource—数据源是关键的Kendo UI组件之一，它是使用本地或远程数据的抽象概念，是理解Grid功能的关键概念。

· 远程CRUD操作—通过Kendo UI数据源发出的HTTP请求从远程数据服务检索数据，并将其提交给远程数据服务。

· 远程数据绑定—提供有关服务器筛选、分页和Grid的其他功能信息。

· KendoUI编辑功能—某些Kendo UI小部件（包括网格）中的编辑功能是通过使用Kendo UI MVVM绑定到模型的特定编辑器元素或表单来实现。

 

初始化网格

要初始化网格，请使用以下两种方法：

· 使用空的"div"元素

· 使用HTML表格

 

使用空的"div"元素

当从空的"div"元素初始化Grid时，初始化脚本语句中将提供所有Grid设置，这意味着您必须使用JavaScript描述网格的布局和配置。

// 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时，可以从表结构和元素的HTML属性推断出其某些设置，这意味着您可以完全在表格的HTML中描述Grid布局。HTML表通常已经填充数据，从而改善了可访问性和搜索引擎优化，并确保即使禁用JavaScript或页面上出现JavaScript错误，用户也可以看到数据。

从HTML表初始化Grid时，窗口小部件使用Kendo UI DataSource实例。通过以下方式提取单元格的内容并填充数据源：

1.   数据源中数据字段的名称是根据标题单元格的内容或标题单元格的数据字段属性创建的。

2.   数据字段的名称必须是有效的JavaScript标识符。因此建议使用数据字段属性，否则标题的单元格内容必须满足以下要求：

o    没有空格

o    无特殊字符

o    第一个字符必须是字母

如果从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 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>

 

功能和特点

· 数据运算

o    数据绑定

o    编辑

o    筛选

o    分组

o    分页

o    排序

· 导出选项

o    Excel

o    PDF

o    打印

· 高级实现

o    增强列

o    状态保持

o    层次结构

o    模板

· 更多设置

o    滚动模式

o    选项

o    渲染和尺寸

o    性能技巧

o    全球化

o    辅助功能

 

引用现有实例

要引用现有的Grid实例：

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

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

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