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 相关文章推荐
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
javascript 关于# 和 void的区别分析
Oct 26 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
javascript求日期差的方法
Mar 02 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
JavaScript执行机制详细介绍
Dec 06 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
在Python中使用第三方模块的教程
2015/04/27 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python中 logging的使用详解
2017/10/25 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
保安员岗位职责
2013/11/17 职场文书
教师学习培训邀请函
2014/02/04 职场文书
上课玩手机检讨书
2014/02/08 职场文书
珍惜水资源建议书
2014/03/12 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书