通過js實現表格行的上下移動，有兩種情況：

1、只對顯示層操作（即只針對頁面的移動並不更新到資料庫）

2、顯示層的移動更新到資料庫中

下面我分佈就這兩種方式的實現進行說明（我使用的是jquery easy ui框架）。

只針對顯示層的操作

//上移
function MoveUp(gridname) {
	var selectRow = $("#"+gridname).datagrid('getSelections');//gridname為data-grid的id
	if(selectRow.length!=1){
		$.messager.alert("提示","請選擇一條資料！");
		return false;
	}
    var row = $("#"+gridname).datagrid('getSelected'); 
    var index = $("#"+gridname).datagrid('getRowIndex', row);
    mysort(index, 'up', gridname);
     
}
function mysort(index, type, gridname) {
    if ("up" == type) {
    	//上移
        if (index != 0) {
        	//非第一行
            var toup = $('#' + gridname).datagrid('getData').rows[index];
            var todown = $('#' + gridname).datagrid('getData').rows[index - 1];

            $('#' + gridname).datagrid('getData').rows[index] = todown;
            $('#' + gridname).datagrid('getData').rows[index - 1] = toup;
            $('#' + gridname).datagrid('refreshRow', index);
            $('#' + gridname).datagrid('refreshRow', index - 1);
            $('#' + gridname).datagrid('selectRow', index - 1);
            
        }
    }
 
}
 

移動發生資料庫更新操作

//上移
function MoveUp(gridname) {
	var selectRow = $("#"+gridname).datagrid('getSelections');
	if(selectRow.length!=1){
		$.messager.alert("提示","請選擇一條資料！");
		return false;
	}
    var row = $("#"+gridname).datagrid('getSelected'); 
    var index = $("#"+gridname).datagrid('getRowIndex', row);
    mysort(index, 'up', gridname);
     
}
function mysort(index, type, gridname) {
    if ("up" == type) {
    	//上移
        if (index != 0) {
        	//非第一行
            var toup = $('#' + gridname).datagrid('getData').rows[index];
            var todown = $('#' + gridname).datagrid('getData').rows[index - 1];
            var upId = toup.id;
            var downId = todown.id;
            updateSort(upId,downId,gridname);
          
        }
    }
 
}
//更新資料庫排序
function updateSort(upId,downId,gridname){
	$.post(ctx+"/projectPic/updateSort.jhtml", {'upId':upId,'downId':downId} ,function (data) {
		$("#"+gridname).datagrid('reload');//重新載入資料，重新整理視窗
	});
}
 

       /**
	 * 修改排序 （sort越大越靠前）
	 * 
	 * @param params
	 */
	@Transactional
	public void updateSortById(DynamicParams params) {
		Long upId = params.getLong("upId");
		Long downId = params.getLong("downId");
		ProjectPic upProjectPic = this.find(upId);
		ProjectPic downProjectPic = this.find(downId);
		Integer upSort = upProjectPic.getSort();
		Integer downSort = downProjectPic.getSort();
		if (upProjectPic != null) {
			upProjectPic.setSort(downSort);
			projectPicDao.update(upProjectPic);
		}
		if (downProjectPic != null) {
			downProjectPic.setSort(upSort);
			projectPicDao.update(downProjectPic);
		}
	}