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

js 实现 table 行上移（数据库）相关推荐

html ul 位置上移,JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）...
JS移动li行数据,点击上移下移 * { padding:0; margin:0; } .content {width:500px;margin:20px auto;} #pCon {width:50 ...
html保存table并刷新,js操作添加删除table行，并进行刷新
添加行的js如下 table 的id为myTable 添加table的一行内容 function insertRow() { var rowValue = document.getElementBy ...
用html向表格插入新行,js向table表格中插入添加新行和选择删除行
js向table表格中插入添加新行和选择删除行-综合特效-网页特效-站长新动力-msxindl.com #tab{ width:50%; } #tab td{ height:2em; text-ali ...
html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能
JS实现table表格内针对某列内容进行即时搜索筛选功能发布时间:2020-08-29 09:26:37 来源:脚本之家阅读:103 作者:Marx-link 本文实例讲述了JS实现table表格 ...
jQuery实现表格行上移下移和置顶
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
sql+php修改mysql结构,MSSQL_修改SQL-SERVER数据库表结构的SQL命令附sql命令行修改数据库，具体不废话了，请看下文代码 - phpStudy...
修改SQL-SERVER数据库表结构的SQL命令附sql命令行修改数据库具体不废话了,请看下文代码详细说明吧. 向表中增加一个 varchar 列: ALTER TABLE distributors ...
mysql创建表语句 cmd_mysql cmd命令行创建数据库表基础语句
一.连接MYSQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1. 连接到本机上的MYSQL. 首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u roo ...
Node.js 连接 MySQL 并进行数据库操作 –node.js 开发指南
Node.js是一套用来编写高性能网络服务器的JavaScript工具包通常在NodeJS开发中我们经常涉及到操作数据库,尤其是 MySQL ,作为应用最为广泛的开源数据库则成为我们的首选,本篇就来 ...
JavaScript如何给Table行设置颜色？
1.首先,在CSS文件中定义要设置的颜色.比如, .resetrowscolor { background-color: red; } 2.在要显示的页面中引入该CSS文件,比如 <li ...

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

只针对显示层的操作

移动发生数据库更新操作

js 实现 table 行上移（数据库）相关推荐

最新文章

热门文章

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

只针对显示层的操作

移动发生数据库更新操作

js 实现 table 行上移 （数据库）相关推荐

最新文章

热门文章

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

js 实现 table 行上移（数据库）相关推荐