jQuery EasyUI Data Grid -Динамическое изменение столбцов

Столбцы DataGrid можно просто определить с помощью свойства 'columns'. Если вы хотите динамически изменять столбцы, это совсем не проблема. Чтобы изменить столбцы, вы можете снова вызвать метод datagrid и передать новое свойство columns.

Создание 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}
        ]]
    });

Запустите веб-страницу, и вы увидите:

Но иногда вам нужно изменить столбцы, поэтому нужно написать немного кода:

    $('#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 и т. д. Нам не нужно определять их снова; мы определяем только те, которые нам нужно изменить.

Скачать примеры jQuery EasyUI

jeasyui-datagrid-datagrid6.zip