jQuery EasyUI DataGrid -Cambio dinámico de columnas

Las columnas del DataGrid se pueden definir fácilmente con la propiedad 'columns'. Si desea cambiar las columnas dinámicamente, no hay ningún problema. Para cambiar las columnas, puede volver a llamar al método datagrid y pasar una nueva propiedad columns.

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

Ejecute la página web y verá:

Pero a veces desea cambiar las columnas, así que necesita escribir algo de código:

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

Recuerde que ya hemos definido otras propiedades, como: url, width, height, etc. No necesitamos definirlas de nuevo; definimos aquellas que necesitamos cambiar.

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid6.zip