jQuery EasyUI Data Grid -Changer dynamiquement les colonnes

Les colonnes du DataGrid peuvent être simplement définies à l'aide de la propriété 'columns'. Si vous souhaitez modifier dynamiquement les colonnes, cela ne pose aucun problème. Pour modifier les colonnes, vous pouvez appeler à nouveau la méthode datagrid et transmettre une nouvelle propriété columns.

Créer un 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}
        ]]
    });

Exécutez la page web, vous verrez :

Mais parfois, vous souhaitez modifier les colonnes, vous devez donc écrire du 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}
        ]]
    });

Rappelez-vous, nous avons déjà défini d'autres propriétés telles que : url, width, height, etc. Nous n'avons pas besoin de les définir à nouveau ; nous définissons uniquement celles que nous devons modifier.

Télécharger les exemples jQuery EasyUI

jeasyui-datagrid-datagrid6.zip