您的位置：首页 > Web前端 > JQuery

jquery实现在页面上实现tr排序并后台处理详解

2013-10-19 11:07 344 查看

页面代码：

<%@ 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

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航