jQuery EasyUI DataGrid -Configurar clasificación

Este ejemplo demuestra cómo ordenar el DataGrid haciendo clic en el encabezado de la columna.

Todas las columnas del DataGrid se pueden ordenar haciendo clic en el encabezado de la columna. Puede definir qué columna se puede ordenar. De forma predeterminada, las columnas no se pueden ordenar, a menos que establezca la propiedad sortable en true.

Crear el DataGrid

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

Definimos algunas columnas ordenables, incluyendo itemid, productid, listprice, unitcost, etc. Las columnas 'attr1' y 'status' no se pueden ordenar.

Al ordenar, el DataGrid enviará dos parámetros al servidor remoto:

  • sort: nombre del campo de la columna de clasificación.
  • order: método de clasificación, puede ser 'asc' o 'desc', el valor predeterminado es 'asc'.

Código del lado del servidor

    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
    $sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'itemid';
    $order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';
    $offset = ($page-1)*$rows;
    
    $result = array();
    
    include 'conn.php';
    
    $rs = mysql_query("select count(*) from item");
    $row = mysql_fetch_row($rs);
    $result["total"] = $row[0];
    
    $rs = mysql_query("select * from item order by $sort $order limit $offset,$rows");
    
    $items = array();
    while($row = mysql_fetch_object($rs)){
        array_push($items, $row);
    }
    $result["rows"] = $items;
    
    echo json_encode($result);

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid8.zip

Otras extensiones