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