jQuery EasyUI DataGrid - Dynamic Change Columns
DataGrid columns can be easily defined using the 'columns' property. If you want to change columns dynamically, that's no problem. To change columns, you can simply re-invoke the datagrid method with a new columns property.
Create 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}
]]
});
When you run the webpage, you will see:
However, 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}
]]
});
Remember, we have already defined other properties such as: url, width, height, etc. We do not need to define them again; we only define what we need to change.