ASP.NET MVC 中的表格行拖放（jQuery DataTables 和 ASP.NET MVC 集成 - 第六部分）
5.00/5 (23投票s)
使用 ASP.NET MVC 应用程序中的 jQuery DataTables 插件，通过拖放功能重新排序表格行
目录
引言
在本文中，我将解释如何在 Web 表格中实现拖放行重排。对于拖放功能，我们将结合使用 jQuery UI Sortable 插件和 jQuery DataTables。前提是表格已通过 jQuery DataTables 插件进行增强。下图展示了一个已实现拖放行重排的 jQuery DataTables 插件增强表格的示例。
jQuery DataTables 插件可以增强一个普通的 HTML 表格，并添加许多 JavaScript 功能。它有许多附加功能，例如类似 Excel 的表格导航、内联单元格编辑、列重排等。它提供的功能之一就是行拖放。在本文中，我将解释如何在您的 ASP.NET MVC 应用程序中使用 jQuery DataTables 的拖放功能。
背景
本文是关于将 jQuery DataTables 插件与 ASP.NET MVC Web 应用程序集成的系列文章之一。您可能还想查看该系列中的其他文章。
- jQuery DataTables 和 ASP.NET MVC 集成
- ASP.NET MVC 可编辑表格
- 在 ASP.NET MVC 中使用 AJAX 刷新 DataTable 的内容
- 创建可展开的主从表
- jQuery DataTables 在 ASP.NET MVC 中的高级过滤
在这些文章中，您可能会找到许多关于在 ASP.NET MVC 中使用 jQuery DataTables 插件的有用信息。如果您还没有阅读第一篇文章，我建议您也阅读一下，因为它包含了一些关于 jQuery DataTables 与 ASP.NET MVC 应用程序基本集成的重要细节。
jQuery DataTables 是一个出色的 jQuery 插件，可让您在表格中显示和管理信息。在《jQuery DataTables 和 ASP.NET MVC 集成》一文中详细介绍了将 jQuery DataTables 插件集成到 ASP.NET MVC 应用程序的说明，但我在这里将简要总结一下如何集成此插件。
首先，您需要在页面中放置一个普通的 HTML 表格。下面的代码展示了一个 `table` 的示例。
<table class="display" id="example">
<thead>
<tr>
<th>OrderIndex</th><th>Name</th><th>Address</th><th>Town</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Gowi</td><td>Town</td><td>Pancevo</td>
</tr>
<tr>
<td>2</td><td>Microsoft</td><td></td><td>Redmond</td>
</tr>
<tr>
<td>3</td><td>IBM</td><td></td><td></td>
</tr>
<tr>
<td>4</td><td>Oracle</td><td></td><td></td>
</tr>
</tbody>
</table>
这将生成一个标准的 Web 表格，与下图中的表格非常相似。
然后，您需要使用该插件绑定表格。这可以通过以下 jQuery 调用来完成。
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable();
});
</script>
结果是，您将获得一个功能齐全的表格，具有分页、排序和过滤功能，如下图所示。
正如您所见，只需一行 JavaScript 代码即可为普通表格添加高级排序、过滤和分页功能。本文的目标是展示如何在这些功能的基础上实现表格行的拖放重排。
使用代码
代码采用标准的模型-视图-控制器 (MVC) 架构组织。
模型
模型是一个包含公司数据的简单类。我们需要包含公司 ID、名称、地址和城镇。此外，每个公司对象都包含一个唯一的排序索引信息。公司将在视图中按此索引排序。公司模型类的源代码如下所示。
public class Company
{
public int ID { get; set; }
public int OrderIndex{ get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string Town { get; set; }
}
视图
由于数据展示是在客户端完成的，因此经典的视图页面非常简单。它包含一个简单的 HTML 表格，并用 jQuery DataTables 插件“装饰”。例如
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery DataTables/ASP.NET MVC Row Reordering</title>
<link href="/Content/dataTables/demo_table.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jQuery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jQuery-ui-1.8.11.min.js" type="text/javascript"></script>
<script src="/Scripts/jQuery.dataTables.min.js" type="text/javascript"></script>
<script src="/Scripts/jQuery.dataTables.rowReordering.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable();
});
</script>
</head>
<body>
<table id="myDataTable" class="display">
<thead>
<tr>
<th></th>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
@foreach(var company in Model) {
<tr id="@company.ID">
<tr>@company.OrderIndex</tr>
<tr>@company.Name</tr>
<tr>@company.Address</tr>
<tr>@company.Town</tr>
</tr>
}
</tbody>
</table>
</body>
</html>
假设控制器已将公司枚举传递给视图。
视图根据 jQuery DataTables 的要求生成一个有效的 HTML 表格。此外，此视图将每个公司的 ID 作为行 ID 属性，并将排序索引放在第一列。这对于 jQuery DataTables 插件不是必需的，但此信息将用于确定在某个位置移动了哪个行。
此外，作为视图的一部分，我们需要使用 jQuery DataTables 插件初始化表格。此初始化脚本将添加标准的 DataTables 功能（分页、关键字过滤和排序）。
控制器
本示例中的控制器有两个功能：提供将在表格中显示的初始公司列表，以及一旦用户重新排序公司后更新公司顺序。
第一个功能相当简单——它只需将公司列表传递给视图。此控制器操作显示在以下列表中。
public class Controller
{
public ActionResult Index()
{
return View(DataRepository.GetCompanies());
}
}
第二个功能将在下一节中介绍。
实现行重排
现在我们有了一个具有所有增强功能的表格，并且想要添加行重排。重排的实现很简单：在 `DataTable` 初始化中需要进行一个额外的调用。
$(document).ready(function () {
$('#myDataTable').dataTable().rowReordering();
});
应用 `rowReordering` 附加组件后，您将能够使用拖放功能对表格中的行进行排序。插件本身将管理行位置并更新索引列。请注意，该附加组件禁用了表格中的排序，因为行需要按顺序索引列进行排序。您可以在下图看到重排是如何工作的。
正如您所见，jQuery UI sortable 应用于表格行。每次移动一行时，插件都会更新顺序索引号。
有很多选项可用于配置插件——您可以在 jQuery DataTables Row Reordering wiki 上查看其他选项。
在服务器端更新顺序
如果在 Web 页面上更新顺序而不持久化更改，则作用不大。因此，行重排插件允许您发送关于
<script type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable().rowReordering({ sURL: "/Company/UpdateOrder" });
});
</script>
每次重新排序行时，插件都会发送一个包含以下信息的 AJAX 请求。
- `id` - 被移动行的 ID。此 ID 放置在被移动表格行 (TR) 的 ID 属性中。
- `fromPosition` - 行的初始位置
- `toPosition` - 行被放置到的位置
- `direction` - 向后或向前
插件将更新表格中的顺序索引，并且接受这些参数的控制器应该在服务器端更新顺序。此控制器操作显示在以下列表中。
public void UpdateOrder(int id, int fromPosition, int toPosition, string direction)
{
if (direction == "back")
{
var movedCompanies = DataRepository.GetCompanies()
.Where(c => (toPosition <= c.OrderIndex && c.OrderIndex <= fromPosition))
.ToList();
foreach (var company in movedCompanies)
{
company.OrderIndex++;
}
}
else
{
var movedCompanies = DataRepository.GetCompanies()
.Where(c => (fromPosition <= c.OrderIndex && c.OrderIndex <= toPosition))
.ToList();
foreach (var company in movedCompanies)
{
company.OrderIndex--;
}
}
DataRepository.GetCompanies().First(c => c.ID == id).OrderIndex = toPosition;
}
在此方法中，顺序索引将根据方向向后或向前移动。结果是，顺序索引将在两端同步。在此示例中，我使用了内存中的对象列表，但在实际情况下，您可能会在数据库中更新顺序索引。
结论
在本文中，我解释了如何在表格中实现行重排。正如您所见，在视图端只需要最少的工作量——只需一个普通的表格和一些简单的 JavaScript，并且这些都可以轻松更改。
插件将在客户端为您处理所有事情，您只需要创建一个控制器操作方法来处理插件发送的 AJAX 调用，并在服务器端也更新顺序。
您可以在 插件站点 上查看行重排插件的其他功能。
历史
- 2012 年 4 月 2 日：初始版本