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

最新推荐文章于 2021-05-07 19:23:23 发布

Garry1115

最新推荐文章于 2021-05-07 19:23:23 发布

阅读量4.8k

点赞数

分类专栏： java javascript java 文章标签： table 行级上移

本文链接：https://blog.csdn.net/zwx19921215/article/details/44339499

版权

java 同时被 3 个专栏收录

38 篇文章 2 订阅

订阅专栏

java

29 篇文章 5 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

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