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