EasyUI DataGrid使用formatter属性实现自定义功能

 使用JQuery EasyUI中的DataGrid组件可以很方便的得到一个数据表格，这里将对这个数据表格做一点扩展，让它能够上下移动表格里的数据行。

   1.定义数据表格：

    
    
    
        
    
            
Item ID
    
            
Product
    
            
List Price
    
            
Unit Cost
    
            
Attribute
    
            
Status
    
            
sort
  
        
    
    
    
    

这里定义了一栏位名叫sort，他的字段是没有的所以随便写了点东西，在这一栏里面有个 formatter 属性，它是一个JS function内容如下：

function sort_format(val,row,index){  
    var res = "";  
    if(index!=0){  
        res+="上移 | ";  
    }  
    var rows=$('#gd').datagrid('getRows').length;  
    if(index !=rows-1){  
        res+="下移";  
    }else{  
        res = res.replace("|","");  
    }  
    return res;  
}  

2.定义好formatter方法后，在来定义一个mysort方法：

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);  
        }  
    }else if("down" == type){  
        var rows=$('#'+gridname).datagrid('getRows').length;  
        if(index != rows-1){  
            var todown = $('#'+gridname).datagrid('getData').rows[index];  
            var toup = $('#'+gridname).datagrid('getData').rows[index+1];  
            $('#'+gridname).datagrid('getData').rows[index+1] = todown;  
            $('#'+gridname).datagrid('getData').rows[index] = toup;  
            $('#'+gridname).datagrid('refreshRow',index);  
            $('#'+gridname).datagrid('refreshRow',index+1);  
            $('#'+gridname).datagrid('selectRow',index+1);  
        }  
    }  
                  
}  

 这样写完之后就可以在页面上进行上下移动行的操作了。

ps.使用refreshRow方法EasyUI都会重新调用该行的formatter里面的方法。