jQuery EasyUI 教程
數(shù)據(jù)網(wǎng)格(DataGrid)列可以使用 'columns' 屬性簡單地定義。如果您想動態(tài)地改變列,那根本沒有問題。為了改變列,您可以重新調(diào)用datagrid 方法,并傳遞一個新的 columns 屬性。
????<table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:550px;height:250px" ????????????url="data/datagrid_data.json" ????????????singleSelect="true" iconCls="icon-save"> ????</table>
????$('#tt').datagrid({ ????????columns:[[ ????????????{field:'itemid',title:'Item ID',width:80}, ????????????{field:'productid',title:'Product ID',width:80}, ????????????{field:'attr1',title:'Attribute',width:200}, ????????????{field:'status',title:'Status',width:80} ????????]] ????});
運(yùn)行網(wǎng)頁,您將看見:
可是有時候您想改變列,所以您需要寫一些代碼:
????$('#tt').datagrid({ ????????columns:[[ ????????????{field:'itemid',title:'Item ID',width:80}, ????????????{field:'productid',title:'Product ID',width:80}, ????????????{field:'listprice',title:'List Price',width:80,align:'right'}, ????????????{field:'unitcost',title:'Unit Cost',width:80,align:'right'}, ????????????{field:'attr1',title:'Attribute',width:100}, ????????????{field:'status',title:'Status',width:60} ????????]] ????});
請記住,我們已經(jīng)定義了其他屬性,比如:url、width、height 等等。我們不需要再一次定義它們,我們定義那些我們需要改變的。