`

jQuery+jQuery.tablednd_0_5 实现表格的拖动排序

    博客分类：
  • js
jqueryUI 
阅读更多
项目需要实现表格拖动排序功能，直接贴代码~~~ 

<%@ 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文件
分享到：
| WdatePicker日历控件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics