easyUI 添加排序到datagrid
2012-08-10 11:13
525 查看
@author YHC
这个示例展示如何排序datagrid通过点击列表头.
查看 Demo
在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable
属性为true
我们定义一些可排序的列包含itemid,productid,listprice,unitcost等等'attr1'
列和 'status'列不能排序.
当排序DataGrid
将发送2个参数到远程服务器:
sort: 排序列字段名.
order: 排序方式, 可以是 'asc' 或者 'desc', 默认值是 'asc'.
easyui-datagrid-demo.zip
这个示例展示如何排序datagrid通过点击列表头.
查看 Demo
在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable
属性为true
创建an 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
将发送2个参数到远程服务器:
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);
下载EasyUI示例代码:
easyui-datagrid-demo.zip
相关文章推荐
- easyUI 添加排序到datagrid
- easyUI 添加排序到datagrid
- EasyUI DataGrid 添加排序
- easyUI 添加排序到datagrid
- 使用easyUI给datagrid添加pagination
- Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】(转自http://www.cnblogs.com/sword-successful/p/3386861.html,感谢分享)
- easyUI 添加CheckBox选择到DataGrid
- EasyUI系列之扩展easyui datagrid的两个方法.动态添加和删除toolbar的项
- easyUI的datagrid每行数据添加操作按钮的方法
- 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现添加、编辑、删除(三)
- datagrid因排序造成的添加删除问题解决方案
- 【项目实战】---为EasyUI DataGrid的某一动态加载数据列添加超链接,点击超链接触发Onclick方法
- easyUI之datagrid数据表格中添加操作列
- EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
- easyui datagrid添加搜索框
- JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码
- easyui datagrid添加progressbar 进度条
- easyUI datagrid 行内容超过添加(...)
- datagrid因排序造成的添加删除问题解决方案
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(82)-Easyui Datagrid批量操作(编辑,删除,添加)