jQuery EasyUI使用教程：動(dòng)態(tài)改變數(shù)據(jù)網(wǎng)格列

---

Kendo UI for jQuery——?jiǎng)?chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)！查看詳情>>>

<jQuery EasyUI最新試用版免費(fèi)下載>

使用'columns'屬性可以很容易地定義數(shù)據(jù)網(wǎng)格列。如果您想要?jiǎng)討B(tài)地改變列，這也非常容易。為了更改列，您可以重新調(diào)用datagrid方法并傳遞一個(gè)新的column屬性。

創(chuàng)建數(shù)據(jù)網(wǎng)格

<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)頁(yè)，您將會(huì)看到：

當(dāng)您想要更改列時(shí)，可以編寫(xiě)一些代碼：

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

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

下載該EasyUI示例：easyui-datagrid-demo.zip

購(gòu)買(mǎi)最新正版授權(quán)！"咨詢?cè)诰€客服"