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

最新推荐文章于 2020-11-17 22:17:58 发布

Java高知社区

最新推荐文章于 2020-11-17 22:17:58 发布

阅读量6.6k

点赞数 3

分类专栏： tr排序文章标签： tr排序

本文链接：https://blog.csdn.net/tjcyjd/article/details/12868947

版权

tr排序专栏收录该内容

0 篇文章 0 订阅

订阅专栏

页面代码：

<%@ 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();
}