jQuery EasyUI学习教程之datagrid点击列表头排序


Posted in Javascript onJuly 09, 2016

这个示例展示如何排序datagrid通过点击列表头.

jQuery EasyUI学习教程之datagrid点击列表头排序

在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);
Javascript 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
JQuery工具函数汇总
Jun 15 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
js实现九宫格抽奖
Mar 19 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 #Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 #Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 #Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 #Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 #Javascript
深入浅析JavaScript中的Function类型
Jul 09 #Javascript
JavaScript基础重点(必看)
Jul 09 #Javascript
You might like
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
pycharm新建一个python工程步骤
2019/07/16 Python
详解python播放音频的三种方法
2019/09/23 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
小学教师自我鉴定
2013/11/07 职场文书
党员自我评价分享
2013/12/13 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
还款承诺书范本
2015/01/20 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
对学校的意见和建议
2015/06/04 职场文书
社区低保工作总结2015
2015/07/23 职场文书
宾馆客房管理制度
2015/08/06 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python