jQuery EasyUI DataGrid -Obtener datos de las filas seleccionadas

Este ejemplo demuestra cómo obtener los datos de las filas seleccionadas.

El componente DataGrid (datagrid) incluye dos métodos para recuperar los datos de las filas seleccionadas:

  • getSelected: obtiene los datos de la primera fila seleccionada; si no hay filas seleccionadas, devuelve null; de lo contrario, devuelve el registro.
  • getSelections: obtiene los datos de todas las filas seleccionadas y devuelve un array de registros de elementos.

Crear DataGrid (cuadrícula de datos)

    <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>

Demostración de uso

Obtener datos de la fila seleccionada:

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

Obtener el itemid de todas las filas seleccionadas:

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

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid3.zip

Otras extensiones