jQuery EasyUI DataGrid - Dynamically Change Columns

DataGrid columns can be simply defined using the 'columns' property. If you want to change the columns dynamically, that's no problem at all. To change the columns, you can call the datagrid method again and pass a new columns property.

Create DataGrid

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

Run the webpage, and you will see:

But sometimes you want to change the columns, so you need to write some code:

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

Please remember, we have already defined other properties, such as: url, width, height, etc. We don't need to define them again; we only define the ones we need to change.

Download jQuery EasyUI Example

jeasyui-datagrid-datagrid6.zip