jQuery EasyUI使用教程：動態改變數據網格列

---

Kendo UI for jQuery——創建現代Web應用程序的最完整UI庫！查看詳情>>>

<jQuery EasyUI最新試用版免費下載>

使用'columns'屬性可以很容易地定義數據網格列。如果您想要動態地改變列，這也非常容易。為了更改列，您可以重新調用datagrid方法并傳遞一個新的column屬性。

創建數據網格

<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}
]]
});

運行該網頁，您將會看到：

當您想要更改列時，可以編寫一些代碼：

$('#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}
]]
});

請記住我們已經定義了其他屬性，例如URL、width、height等，因此不需要再一次定義它們，您只需要定義那些需要改變的即可。

下載該EasyUI示例：

購買最新正版授權！""