通過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);}}

總結

以上是生活随笔為你收集整理的js 实现 table 行上移 （数据库）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。