jQuery EasyUI使用教程之添加排序

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

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

查看jQuery EasyUI演示

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

创建数据网格

1 2 3 4 5 6 7 8 9 10 11 12

< 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' 列不能排序。

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

• 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的教程！