js 实现 table 行上移 （数据库）

通过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);

}
}

}

移动发生数据库更新操作

原理：即调换上下两行的位置（在数据库设计一个sort排序字段，发生移动时调换sort的值即可）

//上移
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);
}
}