jQuery EasyUI DataGrid -Usar la vista de desplazamiento virtual para mostrar grandes cantidades de datos

La característica de desplazamiento virtual de la cuadrícula de datos (datagrid) se puede utilizar para mostrar un gran número de registros sin necesidad de paginación. Al desplazar la barra de desplazamiento vertical, la cuadrícula de datos (datagrid) ejecuta solicitudes ajax para cargar y actualizar los registros existentes. Todo el proceso de actualización es fluido y sin parpadeos. En este tutorial, crearemos una cuadrícula de datos (datagrid) y utilizaremos la característica de desplazamiento virtual para cargar datos desde el servidor.

Crear una cuadrícula de datos (DataGrid)

Para aplicar la característica de desplazamiento virtual a la cuadrícula de datos (datagrid), la propiedad 'view' debe establecerse en 'scrollview'. El usuario debe descargar scrollview desde la extensión de la cuadrícula de datos (datagrid) y hacer referencia al archivo scrollview en el encabezado de la página.

<script type="text/javascript" src="../try/jeasyui/datagrid-detailview.js"></script>

<table id="tt" class="easyui-datagrid" style="width:700px;height:300px"
        title="DataGrid - VirtualScrollView"
        data-options="view:scrollview,rownumbers:true,singleSelect:true,
            url:'datagrid27_getdata.php',autoRowHeight:false,pageSize:50">
    <thead>
        <tr>
            <th field="inv" width="80">Inv No</th>
            <th field="date" width="100">Date</th>
            <th field="name" width="80">Name</th>
            <th field="amount" width="80" align="right">Amount</th>
            <th field="price" width="80" align="right">Price</th>
            <th field="cost" width="100" align="right">Cost</th>
            <th field="note" width="110">Note</th>
        </tr>
    </thead>
</table>

Tenga en cuenta que aquí no necesitamos usar la propiedad pagination, pero la propiedad pageSize es obligatoria, de modo que al ejecutar solicitudes ajax, la cuadrícula de datos (datagrid) obtendrá el número especificado de registros desde el servidor.

Código del servidor

datagrid27_getdata.php

$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 50;

$items = array();
date_default_timezone_set('UTC');
for($i=1; $i<=$rows; $i++){
    $index = $i+($page-1)*$rows;
    $amount = rand(50,100);
    $price = rand(10000,20000)/100;
    $items[] = array(
        'inv' => sprintf("INV%04d",$index),
        'date' => date('Y-m-d',time()+24*3600*$i),
        'name' => 'Name' . $index,
        'note' => 'Note' . $index,
        'amount' => $amount,
        'price' => sprintf('%01.2f',$price),
        'cost' => sprintf('%01.2f',$amount*$price)
    );
}
$result = array();
$result['total'] = 8000;
$result['rows'] = $items;
echo json_encode($result);

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid27.zip