Kendo Grid 实战
4.94/5 (52投票s)
如何在 Web 应用程序中使用 Kendo Grid 处理表格数据
Content
引言
如果我们需要在 Web 应用程序中展示或处理表格数据，那么我们必须使用 HTML 表格或其他库（网格），如 easyUI、Kendo UI、DataTables、jqGrid、extJS 等。我发现 Kendo UI Grid 既简单又更易于维护。
在这里，我将介绍 Kendo UI Grid 控件的一些基本用法，该控件用于处理表格数据。阅读我的文章后，读者将能够在他们的应用程序中使用 Kendo UI 网格。最后，我将在我的 ASP.NET MVC 4 项目中使用 Kendo UI Grid 来操作表格数据，并演示如何将数据列表从视图发送到控制器，以便帮助读者在他们的 Web 应用程序中处理主从记录。
现在你可能会有一个疑问，对吧？
如果 Kendo UI 网站上提供了文档和演示，为什么我还要写关于 Kendo grid 的文章呢？
我们来尝试回答上面的问题。实际上，我正在创建一个摘要笔记，其中包含了对网格/表格执行的最常见操作。如果你决定使用 Kendo grid，那么你会寻找一些基本操作，对吧？但是从 Kendo 文档中很难找到所有常见操作。所以我在这里尝试将对网格/表格执行的一些常见操作集中展示，以便读者可以获得在他们的 Web 项目中使用 Kendo grid 所需的知识。
背景
Kendo UI 是基于 jQuery 的小部件。Kendo UI 还支持服务器端封装（仅限商业版），但我的文章中将只描述客户端问题，因为 Kendo UI web 在客户端使用是免费的。Kendo UI 有点像 jQuery UI，但它比 jQuery UI 更丰富。如果你感兴趣，可以查看它们之间的比较（jQuery UI vs Kendo UI）。
让我们转向 Kendo UI Grid。关于 Kendo UI Grid 的完整文档可在此处找到。
何时使用网格/表格
让我们尝试找出一些使用网格/表格的场景。
- 我们使用 HTML 表格在应用程序中显示静态表格数据。
- 问题与解决方案：对于简单的 HTML 表格，我们必须单独考虑分页、筛选等。如果使用 Kendo Grid，则无需考虑分页、列筛选等。
- 我们使用 HTML 表格来显示筛选后的数据（动态变化的数据）。
- 问题与解决方案：在这种情况下，每次筛选后都必须重新绘制 HTML 表格。我们无法直接将 JSON 数据与 HTML 表格绑定。Kendo Grid 提供了动态将 JSON 数据与表格绑定的选项。
- 我们使用 HTML 表格从用户那里收集信息列表。
- 问题与解决方案：当我们从用户那里收集信息时，我们会向现有表格追加新行；当用户需要删除任何项目时，我们会从现有表格中删除所需的行。在这种情况下，我们必须编写一些 JS/jQuery 代码来执行这些操作，但 Kendo Grid 提供了简单的界面，我们可以通过仅提供 JSON 数据轻松添加新行。
- 有时，我们需要从 HTML 表格中提取选中行的数据。
- 问题与解决方案：在这种情况下，我们将所需数据收集为表格行，然后从其中解析特定数据。我们无法将数据作为 JSON 对象获取，但 Kendo Grid 以 JSON 对象的形式提供选中的数据。
- 等等……
在这篇文章中，我将尝试使用 Kendo Grid 执行上述操作。那么最终我将展示什么呢……？让我们列一个清单。
- 在现有 HTML 表格上应用 Kendo Grid
- 使用 Kendo Grid 进行分页、排序、筛选
- 调整 Kendo Grid 大小
- 从 JSON 数据创建网格
- 使用 JSON 数据重新绑定 Kendo Grid
- 向网格添加新行
- 获取选中行的数据
- 从 Kendo Grid 删除行/记录
- 遍历所有行
- 从 Kendo Grid 隐藏列
- 在 Kendo Grid 上创建模板列
- 在 Kendo Grid 上添加双击事件
- 在 Kendo Grid 上添加行更改事件
- Kendo Grid 中的复选框列
- 从 UI 端向服务器端发送数据列表
开始使用 Kendo Grid 之前。
- 从此处下载 Kendo UI Web
或者
如果你正在使用 Visual Studio，那么可以使用 nuget 将 Kendo UI Web 添加到你的项目中
或者
从包管理器控制台使用“Install-Package KendoUIWeb” - Kendo UI 依赖于 jQuery，因此请在你的项目中添加 jQuery 引用。
最后，你必须在页面/站点中添加以下引用。
<!-- Add CSS reference -->
<link href="~/Content/kendo/2012.3.1114/kendo.common.min.css" rel="stylesheet" />
<!-- CSS reference for theme; you can make custom them
from http://demos.kendoui.com/themebuilder/web.html -->
<link href="~/Content/kendo/2012.3.1114/kendo.metro.min.css" rel="stylesheet" />
<!-- Add JS Script reference -->
<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script src="~/Scripts/kendo/2012.3.1114/kendo.web.min.js"></script>
Kendo Grid 实战
在本节中，我将展示一些使用 Kendo Grid 的示例，以便我们能够解决上述问题。完整的演示可在此处找到。
在现有 HTML 表格上应用 Kendo Grid
我们可以通过以下方式轻松地在 HTML 表格上应用 Kendo Grid：
$(document).ready(function(){
$('#grid').kendoGrid();
});
这里 grid 是一个表格 id。
实时演示可在此处找到。
使用 Kendo Grid 进行分页、排序、筛选
要启用分页、排序和筛选，我们只需在 Kendo Grid 初始化时将其设置为 true。
$('#grid').kendoGrid({
scrollable: true,
sortable: true,
pageable: true,
selectable: "row",
filterable: true
, dataSource: { pageSize: 10 } //defining page size
});
调整 Kendo Grid 大小
我们正在对 dib 或表格应用 Kendo Grid。我们可以通过以下方式定义宽度：
<div id="grid" class="k-content" style="width: 450Px"></div>
为了定义高度，我们必须使用 kendoGrid 初始化。请考虑以下方法：
$(document).ready(function ()
{
$('#grid').kendoGrid({ , height: 350 //350 equals 350Px });
});
从 JSON 数据创建网格
以下代码展示了如何将 JSON 数据与 Kendo Grid 绑定。
$(document).ready(function () {
//JSON data
var people = [
{ firstName: "Hasibul", lastName: "Haque", email: "hasibul2363@gmail.com" }
, { firstName: "Jane", lastName: "Smith", email: "jane.smith@kendoui.com" }
];
$('#grid').kendoGrid({
scrollable: true,
sortable: true,
pageable: true,
selectable: "row",
filterable: true
, dataSource: { data: people, pageSize: 10 } //binding JSON data with grid
});
});
使用 JSON 数据重新绑定 Kendo Grid
如果我们要用另一个 JSON 数据重新绑定网格，那么我们可以采用以下方式：
//Selecting existing grid
var vgrid = $("#grid").data("kendoGrid");
var datasource = vgrid.dataSource;
var newSource = [{ firstName: "Ruhan", lastName: "Ruhan", email: "ruhan@kendoui.com" }];
//Applying new source
datasource.data(newSource);
向 Kendo Grid 添加新行
//Selecting Grid
var vgrid = $("#grid").data("kendoGrid");
//Selecting dataSource
var datasource = vgrid.dataSource;
var newRecord = { firstName: "Hasibul", lastName: "Haque", email: "hasibul@kendoui.com" };
//Inserting new row
datasource.insert(newRecord);
从 Kendo Grid 获取选中行的数据
//Selecting Grid
var gview = $("#grid").data("kendoGrid");
//Getting selected item
var selectedItem = gview.dataItem(gview.select());
//accessing selected rows data
alert(selectedItem.email);
获取多行选定数据
//Selecting Grid
var gview = $("#grid").data("kendoGrid");
//Getting selected rows
var rows = entityGrid.select();
//Iterate through all selected rows
rows.each(function (index, row) {
var selectedItem = gview.dataItem(row);
// your action will go here
});
从 Kendo Grid 删除行/记录
//Selecting Grid
var gview = $("#grid").data("kendoGrid");
//Getting selected row
var dataItem = gview.dataItem(gview.select());
//Removing Selected row
gview.dataSource.remove(dataItem);
//Removing row using index number
gview.dataSource.remove(0);// 0 is row index
遍历所有行
//Selecting Grid
var vgrid = $("#grid").data("kendoGrid");
//Getting grid items
var items = vgrid.dataSource.data();
for (i = 0; i < items.length; i++) {
var item = items[i];
alert(item.firstName);
}
从 Kendo Grid 隐藏列
var grid = $("#grid").data("kendoGrid");
// hide by column name
grid.hideColumn("id");
// hide column by index
grid.hideColumn(2);
在 Kendo Grid 中创建模板列
在操作列中，我不想显示任何数据，但想显示一个链接；当用户点击它时，他将被导航到另一个页面，但为了创建链接，我可能需要另一个列的值。使用语法 #=fieldname#，我们可以访问另一个列的值。Kendo UI 使用 #= # 语法来编写模板代码。
请考虑以下代码，以使用模板列创建 Kendo Grid：
$('#grid').kendoGrid({
scrollable: true,
sortable: true,
pageable: true,
selectable: "row",
filterable: true
, dataSource: { data: people, pageSize: 10 }
, columns:
[
{ field: "firstName", title: "First Name" }
, { field: "lastName", title: "Last Name" }
, { field: "email", title: "email" }
, {
title: "Action",
template: "<a href='https://codeproject.org.cn/foo?firstName=#=firstName#'>Edit</a>"
, filterable: false
}
]
});
或者你可以在此处查看实时演示。
在 Kendo Grid 上添加双击事件
我们必须在表格上添加一个名为 “k-content” 的类名。然后我们将在 “k-content” 上应用双击事件。
$(".k-content").dblclick(function(){//Your code will go here});
你可以从实时演示链接中查看。
在 Kendo Grid 上添加选定行更改事件
我们可以通过以下方式添加选定行更改事件：
var grid = $("#grid").data("kendoGrid");
grid.bind("change", RowSelectionChangeEvent);
完整的演示可在此处找到。
Kendo Grid 中的复选框列
假设我们有 JSON 数据，其中一个属性是布尔值。我们可以轻松地使用复选框显示布尔数据。让我们看看如何在 Kendo Grid 中使用复选框列显示布尔数据。稍后我们将深入探讨。
请考虑以下代码，用于创建带有复选框列模板的 Kendo Grid。
<script type="text/javascript">
$(document).ready(function () {
var users = [{ UserId: 1, UserName: "Robin", IsAdmin: true }
, { UserId: 2, UserName: "Hood", IsAdmin: false }];
$("#grid").kendoGrid({
dataSource: { data: users, pageSize: 10 }// binding data
,pageable: true
, selectable: "multiple row"
, columns: [
{ field: "UserId" }
, { field: "UserName" }
// Creating template column
, { field: "IsAdmin", title: "Is Admin",
template: "<input type=\"checkbox\" #= IsAdmin ?
checked='checked' : '' # class=\"check_row\"/>" }
]
});
});
</script>
<div id="grid"></div>
这里，我只是创建了模板列来显示布尔数据。如果你进行编辑，也就是说，如果你选中或取消选中任何列，那么它不会影响数据项。因此，当你遍历网格数据时，你无法获得更新的记录。所以我必须在复选框（类名= check_row）上添加点击事件，以便用户操作更新数据项。让我们看看如何做到这一点：
//Adding click event on check box
$('.check_row').live('click', function (e) {
//Getting checkbox
var $cb = $(this);
//Getting checkbox value
var checked = $cb.is(':checked');
//Setting checkbox value to data Item
setValueToGridData(checked);
});
function setValueToGridData(val) {
//Selecting Grid
var grid = $("#grid").data("kendoGrid");
//Getting selected Item(s)
var selectedItems = grid.select();
selectedItems.each(function (index, row) {
var selectedItem = grid.dataItem(row);
//Setting value to data item; so that we can read updated data
selectedItem.set('IsAdmin', val);
});
如果我们遍历表格数据，那么我们将根据用户在复选框列上的选择获得所需的数据。
你可以在此处查看实时演示。
那么我们还缺少什么呢？？？一个带有复选框的标题；它将选中或取消选中所有行，对吗？让我们看看如何在列标题上添加复选框，并看看如何向标题复选框添加事件，该事件将更改复选框状态并更改网格行数据。首先，我们必须像下面这样添加标题模板：
headerTemplate: '<label> <input type="checkbox" id="checkAll"/>Check</label>'
然后，我们必须像下面这样在标题复选框上添加点击事件：
$("#checkAll").live('click', function (e) {
var $cb = $(this);
var checked = $cb.is(':checked');
var grid = $('#grid').data('kendoGrid');
grid.table.find("tr").find("td:last input").attr("checked", checked);
//now making all the rows value to true or false
var items = $("#grid").data("kendoGrid").dataSource.data();
for (i = 0; i < items.length; i++) {
var item = items[i];
item.set(IsAdmib, checked);
}
//If checkbox is unchecked them clear all rows
if (!checked)
{
$("#grid").data("kendoGrid").clearSelection();
}
});
查看实时演示，请点击此处。
现在我们还缺少什么呢？？？我们希望当我们选择一个复选框时，行能被高亮显示。如果我们选中标题复选框，那么所有行都将被高亮显示。
让我们看看如何实现上述目标。在执行上述操作之前，我想分享两个问题：
- 导航到另一页时，行选择会丢失。
- 如果我选中标题复选框，它应该选中所有行，但它只选中当前页的行。
解决方案
- 我们必须实现一种机制，使其在导航到另一页时能够记住每次选择。
- 如果我们通过读取当前页面的行来应用“已选择行”的 CSS，那么表格的所有行都不会受到影响。因此，我们必须对数据而不是表格行应用更改。
现在让我们开始吧……当用户选中复选框时，高亮显示该行。在这里，我们必须在复选框上添加更改事件，以便我们可以为单独的行应用 CSS。在这里，我在 Kendo Grid 上添加了 dataBound 事件。在此事件内部，我添加了复选框更改事件。请检查以下内容：
dataBound: function() {
var grid = this;
//handle checkbox change event
grid.table.find("tr").find("td:last input")
.change(function(e) {
var checkbox = $(this);
var selected = grid.table.find("tr").find(
"td:last input:checked").closest("tr");
grid.clearSelection();
//persist selection per page;
var ids = selectedIds[grid.dataSource.page()] = [];
if (selected.length) {
grid.select(selected);
selected.each(function(idx, item) {
//Adding ids to buffer so that it can memorize the changes
ids.push($(item).data("uid"));
});
}
});
//select persisted rows
var ids = selectedIds[grid.dataSource.page()] || [];
//Adding css to buffered rows
for (var idx = 0, length = ids.length; idx < length; idx++) {
var tr = grid.tbody.find("tr[data-uid='" + ids[idx] + "']");
tr.addClass("k-state-selected");
tr.find("td:last input").attr("checked", checked);
}
//If header is checked then make all rows selected
if($("#checkAll").is(':checked') == true)
{
$('#grid').data('kendoGrid').tbody.find("tr").addClass('k-state-selected');
$('#grid').data('kendoGrid').tbody.find("tr").find("td:last input").attr("checked", checked);
}
// Outside of change event; it will fire on page change
//if check box is checked then adding css to checked row
grid.table.find("tr").find("td:last input:checked").closest("tr").addClass('k-state-selected');
}
实时演示可在此处找到。
从 UI 端向服务器端发送数据列表
在这里，我将尝试展示如何将数据列表发布到服务器端，以便帮助初学者处理主从记录。我将使用 ASP.NET MVC 4 来创建一个示例解决方案。
假设我有一个像下面这样的“User”实体：
public class User
{
public int UserId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
}
现在假设我有一个视图，其中包含用户列表，如下图所示：
现在我想将此网格数据（用户列表）发布到服务器端。如果使用 HTML 表格，我们必须解析表格行以获取所需数据。Kendo grid 帮助我们无需解析即可获取 JSON 数据。我们只需编写以下代码即可获取 JSON 数据。
var users = $("#gridUser").data("kendoGrid").dataSource.data();
现在我们有了 JSON 数据，可以轻松地将其发布到服务器。假设我们有一个如下所示的控制器方法：
[HttpPost]
public JsonResult SaveGridData(List<user> users)
{
// Here I am not implementing all
// I am interested to show controller is getting data from view
var count = 0;
if (users != null)
{
count = users.Count;
}
//Returns how many records was posted
return Json(new { count = count });
}
让我们使用 AJAX post 将视图数据发送到控制器
function Save() {
//getting json data from kendo Grid
var gridData = $("#gridUser").data("kendoGrid").dataSource.data();
$.ajax({
type: "POST"
, url: "/Home/SaveGridData"
, data: JSON.stringify({ users: gridData })
,contentType:"application/json"
, success: function (result) {
alert(result.count+ " record(s) found");
}
});
}
如果在调试模式下运行我的解决方案，我将发现有两个记录已发布到服务器端，如下所示：
结论
我认为这些是任何需要处理表格/网格的简单项目的基本操作。在这里，我尝试展示 Kendo Grid 的一些简单用法，以便人们可以轻松使用它并获取所有必要的东西。
希望您喜欢 Kendo UI Grid 的简洁性。