jquery实现在页面上实现tr排序并后台处理详解
页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>上下排序Demo</title>
<script language="javascript" src="common/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$('.listTable').find('.button-up').click(function(){
var now = $(this).parent().parent().parent();
var prev = now.prev();
now.insertBefore(prev);
buttomShow();
})
$('.listTable').find('.button-down').click(function(){
var now = $(this).parent().parent().parent();
var next = now.next();
next.insertBefore(now);
buttomShow();
})
$('#submit').click(function(){
var data = [];
for(var i=0;i<$('.listTable tr').length;i++){
var json = {
id:$('.listTable tr').eq(i).attr('data-id'),
orderby:i
};
data[i]=json;
}
var jsonStr=JSON.stringify(data);
alert(jsonStr);
})
buttomShow();
function buttomShow(){
$('.listTable').find('.button-up').show();
$('.listTable').find('.button-down').show();
$('.listTable').find('.button-up').eq(0).hide();
$('.listTable').find('.button-down').last().hide();
}
})
</script>
</head>
<body>
<table>
<tr>
<td width="5%">序号</td>
<td width="20%">广告主题</td>
<td width="15%">排序</td>
<td width="15%">操作</th>
</tr>
<tbody class="listTable">
<tr data-id='1'>
<td width="5%">1</td>
<td width="20%">主题1</td>
<td width="15%">
<span style='margin-left:10px;width:15px;height:15px; float:left;'><a class="button-up" href="javascript:;">↑</a></span>
<span style='margin-left:10px;width:15px;height:15px; float:left;'><a class="button-down" href="javascript:;">↓</a></span>
</td>
<td width="15%"><a href="#" class="del_btn">删除</a></td>
</tr>
<tr data-id='2'>
<td>2</td>
<td>主题2</td>
<td>
<span style='margin-left:10px;width:15px;height:15px; float:left;'><a class="button-up" href="javascript:;">↑</a></span>
<span style='margin-left:10px;width:15px;height:15px; float:left;'><a class="button-down" href="javascript:;">↓</a></span>
</td>
<td width="15%"><a href="#" class="del_btn">删除</a></td>
</tr>
<tr data-id='3'>
<td>3</td>
<td>主题3</td>
<td>
<span style='margin-left:10px;width:15px;height:15px; float:left;'><a class="button-up" href="javascript:;">↑</a></span>
<span style='margin-left:10px;width:15px;height:15px; float:left;'><a class="button-down" href="javascript:;">↓</a></span>
</td>
<td width="15%"><a href="#" class="del_btn">删除</a></td>
</tr>
</tbody>
<tr>
<td colspan="5"><input id="submit" type="button" value="提交"></td>
</tr>
</table>
</body>
</html>
后台代码：
JSONArray jsonArray = JSONArray.fromObject(jsonStr);
List<Map<String,Object>> mapListJson = (List<Map<String,Object>>)jsonArray;
for (int i = 0; i < mapListJson.size(); i++) {
Map<String,Object> obj=mapListJson.get(i);
String id=obj.get("id").toString();
String orderby=obj.get("orderby").toString();
}
需要的jar包：
很简单的一个demo，注意别忘记了以下jar包了哦json.jar
json-lib-2.4-jdk15.jar
ezmorph-1.0.4.jar
效果图：
