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

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

   1.定义数据表格：

     

<table id="gd" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"  
            data-options="singleSelect:true,collapsible:true,url:'../datagrid/datagrid_data1.json'">  
	<thead>  
		<tr>  
			<th data-options="field:'itemid',width:80">Item ID</th>  
			<th data-options="field:'productid',width:100">Product</th>  
			<th data-options="field:'listprice',width:80,align:'right'">List Price</th>  
			<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>  
			<th data-options="field:'attr1',width:250">Attribute</th>  
			<th data-options="field:'status',width:60,align:'center'">Status</th>  
			<th field="23" formatter="sort_format" width="100">sort</th>
		</tr>  
	</thead>  
</table>  

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

function sort_format(val,row,index){
	var res = "";
	if(index!=0){
		res+="<a name='up' href='javascript:void(0);' onclick=\"mysort("+index+",'up','gd);\" title='上移'>上移</a> | ";
	}
	var rows=$('#gd').datagrid('getRows').length;
	if(index !=rows-1){
		res+="<a name='down' href='javascript:void(0);' onclick=\"mysort("+index+",'down','gd');\" title='下移'>下移</a>";
	}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里面的方法。