动态改变列的数据表格

使用教程 » 动态改变列的数据表格

可以使用“columns”属性轻松定义DataGrid列。 如果您想要动态地更改列，这根本不是问题。 要更改列，可以调用datagrid方法并传递一个新列属性。

创建数据表格

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

运行web页面，您将看到:

有时您希望更改列，这样就可以编写一些代码:

$('#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、宽度、高度等其他属性。我们不需要再定义它们，我们定义我们想要改变的.

下载 EasyUI 实例: