jQuery EasyUI使用教程之添加排序

<jQuery EasyUI最新试用版免费下载>

本示例主要演示了如何通过点击列表头对数据网格进行排序。

查看jQuery EasyUI演示

在数据网格中所有的列都可以通过单击列表头进行排序，您可以定义哪一列进行排序。默认情况下，列时不能排序的，除非您将sortable属性设置为true。

创建数据网格

1

2

3

4

5

6

7

8

9

10

11

12

<tableid="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>

<thfield="itemid"width="80"sortable="true">Item ID</th>

<thfield="productid"width="80"sortable="true">Product ID</th>

<thfield="listprice"width="80"align="right"sortable="true">List Price</th>

<thfield="unitcost"width="80"align="right"sortable="true">Unit Cost</th>

<thfield="attr1"width="150">Attribute</th>

<thfield="status"width="60"align="center">Stauts</th>

</tr>

</thead>

</table>

我们定义一些可排序的列，包含itemid、productid、listprice、unitcost等。'attr1' 列和 'status' 列不能排序。

当排序时该数据网格会发送两个参数到服务器：

• sort：排序列字段名称
• order：排序方式，可以是'asc'或者'desc'，默认值是'asc'。

服务器代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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

下载该EasyUI示例：easyui-datagrid-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程！