项目需要实现表格拖动排序功能，直接贴代码~~~
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery-tableDnD</title>
<script type="text/javascript" src="tablednd.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablednd_0_5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#actionItems").tableDnD({
onDrop:function(table,row) {
INDEX = 0;
$(".sequence").each(function() {
if($(this).text() != ++INDEX) {
$(this).html(INDEX);
}
});
}
});
});
</script>
<style type="text/css">
TABLE TD {
border-bottom: #c3d3e3 solid 1px;
border-left: #c3d3e3 solid 1px;
border-right: solid #c3d3e3 1px;
border-top: #c3d3e3 solid 1px;
}
TABLE TH {
border-bottom: #c3d3e3 solid 1px;
border-left: #c3d3e3 solid 1px;
border-right: solid #c3d3e3 1px;
border-top: #c3d3e3 solid 1px;
background-color: #e9f0f7;
height: 30px;
}
</style>
</head>
<body>
<table id="actionItems" style="border-collapse: collapse;">
<thead>
<tr>
<th style="cursor: default;">
<div>ID</div>
</th>
<th style="cursor: default;">
<div>Name</div>
</th>
<th style="cursor: default;">
<div>Status</div>
</th>
<th style="cursor: default;">
<div>Project</div>
</th>
<th style="cursor: default;">
<div>Date</div>
</th>
</tr>
</thead>
<tbody id="sortable">
<tr>
<td class="sequence">1</td>
<td><a id="toActionItemDetail" href="#">prototype</a></td>
<td>New</td>
<td>Em6.0</td>
<td>2012-09-10</td>
</tr>
<tr>
<td class="sequence">2</td>
<td><a id="toActionItemDetail" href="#">Action</a></td>
<td>Open</td>
<td>prvo</td>
<td>2012-09-23</td>
</tr>
<tr>
<td class="sequence">3</td>
<td><a id="toActionItemDetail" href="#">Item</a></td>
<td>Closed</td>
<td>Em2.0</td>
<td>2011-07-10</td>
</tr>
</tbody>
</table>
</body>
</html>
附件附需要的js文件
分享到：
相关推荐
《jQuery Tablednd 0.5插件：实现表格行拖动功能详解》 在Web开发中，交互性是提升用户体验的关键因素之一。jQuery库以其强大的功能和易用性，深受开发者喜爱。今天我们将深入探讨一个jQuery插件——Tablednd 0.5，...
**jQuery TableDnD（拖放表格）插件基本使用** jQuery TableDnD是一款强大的JavaScript库，它允许用户在HTML表格中实现行的拖放功能。这个插件非常适合那些需要用户重新排序数据的Web应用，例如任务管理、日程安排...
结合使用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5，你可以创建一个功能强大的交互式表格，不仅支持行拖放，还能记录并恢复用户的排序偏好，极大地提高了用户在数据管理方面的体验。这三种工具的结合使用，...
`jquery.tablednd_0_5.js`是专门用于表格行拖放排序的jQuery插件。它允许用户通过鼠标拖动来改变表格行的顺序，增强了表格的可操作性。这个插件的工作原理是监听鼠标的移动事件，当检测到拖动行为时，动态更新DOM...
此压缩包"bootstrapTable jquery.tablednd行拖动调整资源.zip"包含了一组与BootstrapTable集成的jQuery Tablednd插件，主要用于实现表格行的拖放功能，以便用户可以通过直观的交互方式调整数据的顺序。 jQuery ...
【前端项目-TableDnD.zip】是一个包含TableDnD插件的压缩包，它是一个基于jQuery的库，主要用于实现HTML表格中的行拖放功能。这个插件使得用户可以通过直观的拖放操作来重新排序表格中的数据，提高了交互性和用户...
TableDnD是一款基于JavaScript和jQuery的开源插件，专门用于实现HTML表格的行拖动排序功能。这个插件使得用户可以通过鼠标拖动来改变表格中行的顺序，提供了直观且用户友好的交互体验。在网页设计和开发中，TableDnD...
3. 使用JavaScript（可能是jQuery）来初始化表格，并设置`reorderRows`为`true`，以启用拖拽排序功能。 4. 可选地，你可以监听`onReorderRow`事件，以便在排序发生时更新后端数据或者执行其他逻辑。 拖拽排序的实现...
描述中的“表格移动 表格拖动 表格拖曳 jquery tablednd下载 tableDnD下载”进一步证实了这与jQuery的一个插件——jQuery tableDnD（Table Drag and Drop）有关。jQuery tableDnD是一个轻量级的解决方案，它允许用户...
总的来说，"自动拖动排序"是通过jQuery和TableDnD插件实现的一种增强用户交互的方法，它让用户能够直观地调整表格行的顺序，提升数据管理的便捷性。这个技术在各种需要用户自定义顺序的应用场景中都非常实用，例如...
jQuery表格拖动排序插件TableDnD jQuery常用网站商品分类筛选功能 jquery-弹出表单录入商品信息 jQuery弹出层插件popupWindow.js jQuery调色板变换背景 jQuery调用百度地图坐标定位 jquery多功能表单验证2.0(原创) ...
JQuery-tableDnD 是一个基于 jQuery 的库，专门用于实现表格行的拖放功能，让用户可以方便地通过鼠标操作来重新排序表格数据。在网页开发中，这种交互性可以提高用户体验，特别是在需要用户自定义顺序或者管理列表的...
Bootstrap TableDnD是一款基于Bootstrap框架的插件，主要用于实现表格内的行和列的动态排序功能。这个插件使得用户可以通过简单的拖放操作来改变表格中行或列的顺序，从而提供更加直观和友好的交互体验。在网页设计...
17. **TableDnD**：允许用户在表格中重新排列行，常用于任务管理或列表排序。 18. **Draggable Map with jQuery**：教程教你如何使用jQuery创建一个可拖动的地图，适用于地理定位和导航应用。 19. **PHP & jQuery ...
总之，通过 Bootstrap Table 插件配合适当的 JavaScript 和后端处理，我们可以轻松实现表格行的拖拽排序功能。不过要注意，对于分页场景，必须妥善处理全量数据的排序以避免出现错误。希望这个教程能帮助你理解和...
《使用tableDragAndDrop jQuery插件实现表格行列拖放功能》 在网页开发中，交互性和用户体验往往是衡量一个网站质量的重要标准。对于数据展示，尤其是结构化的数据，如表格，用户有时需要根据需求自由调整其排列...