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