前端批量对table tr 进行置顶、移动、置底操作。

在网上搜索了下，大部分都是针对单行进行置顶、上下移动、置底操作的，几乎没有针对复选多行进行批量移动操作。下面我直接贴代码。代码我只写了一个大概，很多细节还未完善，比如判断已经移到到最顶部或最底部等，这里贴代码只是给大家一个参考。

<div class="row" style="width: 900px;margin: 0px auto;margin-top: 10px;">
		<div class="col-xs-12">
			<div class="clearfix">
				<div class="pull-left tableTools-container">
					<div class="btn-group btn-overlap">
						<div class="ColVis btn-group" title="" data-original-title="Show/hide columns">
							<button class="checkfx btn btn-white btn-info btn-bold">
								反选
							</button>
							<button class="movetop btn btn-white btn-info btn-bold">
								置顶
							</button>
							<button class="moveup btn btn-white btn-info btn-bold">
								上移
							</button>
							<button class="movedown btn btn-white btn-info btn-bold">
								下移
							</button>
							<button class="movebottom btn btn-white btn-info btn-bold">
								置底
							</button>
						</div>
					</div>
				</div>
				<div class="pull-right tableTools-container">
					<div class="btn-group btn-overlap">
						<div class="ColVis btn-group" title="" data-original-title="Show/hide columns">
							<button class="url_reload btn btn-white btn-info btn-bold">
								重置
							</button>
							<button class="ColVis_Button ColVis_MasterButton btn btn-white btn-info btn-bold">
								保存
							</button>
						</div>
					</div>
				</div>
			</div>
			<div>
				<div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
					<table id="dynamic-table" class="table table-bordered table-hover dataTable no-footer" >
						<thead>
							<tr role="row">
								<th class="center sorting_disabled" style="width: 70px;">
									<label class="pos-rel"> <input type="checkbox" class="ace"> <span class="lbl"></span>
								</label></th>
								<#list fieldList as flist>
									<th class="center">${flist.qmzzname!''}</th>
								</#list>
							</tr>
						</thead>
						<tbody class="table1">
							<#list rowList as rlist>
								<tr role="row"  style="width: 70px;">
									<td class="center"><label class="pos-rel"> <input type="checkbox" name="datacheck" class="ace" value="${rlist.mainid}"> <span class="lbl"></span>
									</label>
									</td>
									<#list fieldList as flist>
										<#assign x=flist.qmzz>
										<td class="center">
										 	${rlist[x]}
										</td>
									</#list>
								</tr>
							</#list>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<#include "/WEB-INF/templates/ace_admin/gy/platform/bootstrap/ace_admin_end_resources.html">
	<script>
	    $(function(){
	    	$('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);
			$('#dynamic-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
				var th_checked = this.checked;  //全选
				if(th_checked){
					$("input[name=datacheck]").prop("checked", true);
				}else{
					$("input[name=datacheck]").prop("checked", false);
				}
			});
			$(".checkfx").on('click', function(){ //反选
				$("input[name=datacheck]").each(function(i){
					var th_checked = $("input[name=datacheck]")[i].checked;
					if(th_checked){
						$("input[name=datacheck]").eq(i).prop("checked", false);
					}else{
						$("input[name=datacheck]").eq(i).prop("checked", true);
					}
				})
			})
			
			$(".movetop").on('click', function(){  //置顶
				var selecttr=$("input[name=datacheck]:checked");
				if(selecttr.length ==0){
					layer.alert("请勾选需要置顶的记录!");
					return false;
				}
				var fruits = [];
				$("input[name=datacheck]:checked").each(function(i){
						fruits.push(this);
				})
				for(var i=fruits.length-1;i>=0;i--){
					var obj=fruits[i];
					setMoveTop(obj);
				}
			})
			
			$(".url_reload").on('click', function(){ //重置
				window.location.reload();
			})
			
			
			
			
			$(".movebottom").on('click', function(){ //置底
				var selecttr=$("input[name=datacheck]:checked");
				if(selecttr.length ==0){
					layer.alert("请勾选需要置顶的记录!");
					return false;
				}
				$("input[name=datacheck]:checked").each(function(i){
						setMoveBottom(this);
				})
			})
			
			
			$(".moveup").on('click', function(){ //上移动
				var selecttr=$("input[name=datacheck]:checked");
				if(selecttr.length ==0){
					layer.alert("请勾选需要置顶的记录!");
					return false;
				}
				$("input[name=datacheck]:checked").each(function(i){
						var obj=this;
						setMoveUp(obj);
				})
			})
			
			$(".movedown").on('click', function(){  //下移动
				var selecttr=$("input[name=datacheck]:checked");
				if(selecttr.length ==0){
					layer.alert("请勾选需要置顶的记录!");
					return false;
				}
				var fruits = [];
				$("input[name=datacheck]:checked").each(function(i){
						fruits.push(this);
				})
				for(var i=fruits.length-1;i>=0;i--){
					var obj=fruits[i];
					setMoveDown(obj);
				}
			})
			
			 var len= $(".table1 >tr").length; //获取行的总长度
			 //置底
		    function setMoveBottom(obj){
		        var $tr = $(obj).parents("tr");
	            $tr.fadeOut().fadeIn();
	            $(".table1").append($tr);
	            $tr.css("color","red");
		    }
		    //置顶
		    function setMoveTop(obj){
		         var $tr = $(obj).parents("tr");
	            $tr.fadeOut().fadeIn();
	            $(".table1").prepend($tr);
	            $tr.css("color","red");
		    }
		    //下移动
		    function setMoveDown(obj){
		    	console.log(len);
		        var $tr = $(obj).parents("tr");
	            if ($tr.index() != len - 1) {
	                $tr.fadeOut().fadeIn();
	                $tr.next().after($tr);
	                $tr.css("color","red");
	            }
		    }
		    //上移动
		    function setMoveUp(obj){
		        var $tr = $(obj).parents("tr");
	            if ($tr.index() != 0) {
	                $tr.fadeOut().fadeIn();
	                $tr.prev().before($tr);
	                $tr.css("color","red");
	            }
		    }
	    })
	</script>