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示例：

购买最新正版授权！""