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里面的方法。