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]);
		}