jquery 拖动排序插件tableDnD

table拖拽排序并保存数据库

①：引入jquery.js以及<script type="text/javascript" src="${basePath}/js/jquery/jquery.tablednd_0_5.js"></script>

②：在页面每一行后面加入原始数据的id和显示顺序

<script langugage="javascript">
							initSeqArray.push("${id}_${showSeq}");
						</script>

③：在页面上添加保存拖拽后保存顺序的按钮

<input	type="button" value="保存顺序" class="ImgButtonLong" onClick="dosaveSeq();"> 

为每一条记录的tr添加id

<tr id="${id}_${showSeq}">

③：初始化插件

var initSeqArray = new Array();
		var fieIdSeqArray;	
		$(document).ready(function(){
			//为table绑定排序事件
			 $("#table").tableDnD({
		         onDragClass:"myDragClass",
		         onDrop:function(table,row) {
		             var rows = table.tBodies[0].rows;
		             fieIdSeqArray = new Array();
		             flag = 1;
		             for (var i=0; i<rows.length; i++) {
		                fieIdSeqArray.push(rows[i].id);
		             }
	             }
	   		 });
		});

④：ajax保存顺序方法

 function dosaveSeq() {
	    	if(fieIdSeqArray != undefined){
		    	var t1 = fieIdSeqArray.join(",");
		    	var t2 = initSeqArray.join(",");
		    	if(flag == 1 && t1 != t2) {
		    		$.ajax({ 
						 type: "POST",
						 url: "${basePath}/***/sortIndxSeq.action",
						 data: 'sort='+fieIdSeqArray,
						 dataType: "html",
						 success: function(msg) {
							if(msg == initSeqArray.length) {
								alert("字段序列修改成功！");
								location.href = "${basePath}/888/queryIndex.action?;
							}else {
								alert("字段序列修改失败");
							}
						 }
					 });
		    	}else {
		    		alert("未发现变更记录");
		    	}
		    }else {
		    	alert("未发现变更记录");
		    }
	    }

⑤：action中先通过request获取参数sort进行分割，最后返回修改顺序的记录数

String[] array = sort.split(",");
		int count = 0;
		for(int i=0;i<array.length;i++){
			String[] tmp = array[i].split("_");
			count = count + this.jdbcTemplate.update("update **** set SHOW_SEQ="+i+" where ID="+tmp[0]);
		}