easyui中的datagrid行数据如何实现上移和下移

在easyui的datagrid中，有时候需要将上下行进行上移动或者下移动的操作，那如何实现上移动和下移动呢？

jsp代码：
<div id="contentDiv" data-options="region:'center',title:'人员列表',split:false" style="width:40%">
<table id="人员列表"></table>
</div>
页面的效果图：



js代码实现
$('#人员列表').datagrid({
        toolbar : [{
    iconCls: 'icon-edit',
      text : "上移",
    handler: function(){
    upMoves();
    }
    },'-',{
    iconCls: 'icon-edit',
      text : "下移",
    handler: function(){
    downMoves();
    }

    }]
）}
function upMoves(){
//var row = $('#人员列表').datagrid('getSelected');
var selectrow=$('#人员列表').datagrid('getSelected');  
var rowIndex=$('#人员列表').datagrid('getRowIndex', selectrow); 
var rowlength = $("#人员列表").datagrid('getRows').length
if(rowIndex==0){  
        $.messager.alert('提示', '顶行无法上移!', 'warning');  
    }else{  
        $('#人员列表').datagrid('deleteRow', rowIndex);//删除一行  
        rowIndex--;  
        $('#人员列表').datagrid('insertRow', {  
            index:rowIndex,  
            row:selectrow  
        });  
        $('#人员列表').datagrid('selectRow', rowIndex);  
    }  

}

function downMoves(){
var selectrow=$('#人员列表').datagrid('getSelected');  
var rowIndex=$('#人员列表').datagrid('getRowIndex', selectrow); 
var rowlength = $("#人员列表").datagrid('getRows').length
if(rowIndex==rowlength-1){  
        $.messager.alert('提示', '底行无法下移!', 'warning');  
    }else{  
        $('#人员列表').datagrid('deleteRow', rowIndex);//删除一行  
        rowIndex++;  
        $('#人员列表').datagrid('insertRow', {  
            index:rowIndex,  
            row:selectrow  
        });  
        $('#人员列表').datagrid('selectRow', rowIndex);  
    } 
var rows = $("#人员列表").datagrid('getRows')
console.info(rows);
}

这样写智能实现页面上的“暂时”的上下移动效果，一旦刷新之后，我们的上下移动之后的效果就没有了，有回到原点，这里就需要将我们上下操作后的效果保存到数据库，然后再刷新后，重新读取数据，就是我们操作后的数据样式了。
利用 var rows = $("#人员列表").datagrid('getRows') 来获取到我们我们操作后当前页面的数据，然后传到后台，写到数据表中，这样就可以固定上下移动后的效果了。