jQuery EasyUI データグリッド -列を動的に変更

データグリッド（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