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

￡神魔★判官ぃ 2022-08-07 05:52 311阅读 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);
    		}
    	}

##     ##