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

通过js实现表格行的上下移动，有两种情况：

1、只对显示层操作（即只针对页面的移动并不更新到数据库）

2、显示层的移动更新到数据库中

下面我分布就这两种方式的实现进行说明（我使用的是jquery easy ui框架）。

只针对显示层的操作

//上移function MoveUp(gridname) {var selectRow = $("#"+gridname).datagrid('getSelections');//gridname为data-grid的idif(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 */@Transactionalpublic 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);}}