使用easyUI 动态改变datagrid的columns

@author YHC

DataGrid 列可以使用'columns' 属性简单的定义,如果你想动态的改变columns,那根本没有问题,改变columns
,你可以重新调用datagrid 方法和传递一个新的columns 属性,就o了.

创建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页面,你将看见:



查看
Demo

可是有时候你想改变columns,所以你需要写一些代码:

$('#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 示例代码:

easyui-datagrid-demo.zip