jQuery EasyUI Data Grid -Obtenir les données de la ligne sélectionnée

Cet exemple montre comment obtenir les données de la ligne sélectionnée.

Le composant Data Grid (datagrid) comprend deux méthodes pour récupérer les données des lignes sélectionnées :

• getSelected : obtient les données de la première ligne sélectionnée. S'il n'y a pas de ligne sélectionnée, renvoie null ; sinon renvoie l'enregistrement.
• getSelections : obtient les données de toutes les lignes sélectionnées et renvoie un tableau d'éléments d'enregistrement.

Création d'une grille de données (DataGrid)

    <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
            url="data/datagrid_data.json"
            title="Load Data" iconCls="icon-save">
        <thead>
            <tr>
                <th field="itemid" width="80">Item ID</th>
                <th field="productid" width="80">Product ID</th>
                <th field="listprice" width="80" align="right">List Price</th>
                <th field="unitcost" width="80" align="right">Unit Cost</th>
                <th field="attr1" width="150">Attribute</th>
                <th field="status" width="60" align="center">Stauts</th>
            </tr>
        </thead>
    </table>

Démonstration d'utilisation

Obtenir les données de la ligne sélectionnée :

    var row = $('#tt').datagrid('getSelected');
    if (row){
        alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);
    }

Obtenir l'itemid de toutes les lignes sélectionnées :

    var ids = [];
    var rows = $('#tt').datagrid('getSelections');
    for(var i=0; i<rows.length; i++){
        ids.push(rows[i].itemid);
    }
    alert(ids.join('\n'));

Télécharger les exemples jQuery EasyUI

jeasyui-datagrid-datagrid3.zip