jQuery EasyUI DataGrid -Настройка сортировки

В этом примере показано, как сортировать DataGrid, щёлкая по заголовкам столбцов.

Все столбцы DataGrid можно сортировать, щёлкая по заголовкам столбцов. Вы можете определить, какие столбцы можно сортировать. По умолчанию столбцы нельзя сортировать, если только вы не установите свойство sortable в true.

Создание 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>

Мы определяем несколько сортируемых столбцов, включая itemid, productid, listprice, unitcost и т. д. Столбец 'attr1' и столбец 'status' нельзя сортировать.

При сортировке DataGrid отправляет на удалённый сервер два параметра:

  • sort: имя поля сортируемого столбца.
  • order: порядок сортировки, который может быть 'asc' или 'desc', по умолчанию — 'asc'.

Код на стороне сервера

    $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);

Скачать примеры jQuery EasyUI

jeasyui-datagrid-datagrid8.zip

Другие расширения