jQuery EasyUI Data Grid - Dynamically changing columns

jQuery EasyUI Data Grid - Dynamically changing columns

The columns of jQuery EasyUI DataGrid can be simply defined using the 'columns' property. Y ou can also dynamically change the column, and in order to change the column, you can call the datagrid method again and pass a new columns property.

Create a data grid (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}
      ]]
    });

Run the web page and you'll see:

But sometimes you want to change the column, 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}
      ]]
    });

Keep in mind that we've defined other properties, such as url, width, height, and so on. We don't need to define them again, we define what we need to change.

Download the jQuery EasyUI instance

jeasyui-datagrid-datagrid6.zip