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 相关文章推荐
jQuery load方法用法集锦
Dec 06 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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 Rename 更改文件、文件夹名称
2011/05/24 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
经验几则 推荐
2006/09/05 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
JS实现队列的先进先出功能示例
2017/05/10 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python学生信息管理系统修改版
2018/03/13 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
Sanic框架配置操作分析
2018/07/17 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
新娘父亲婚礼致辞
2014/01/16 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
js不常见操作运算符总结
2021/11/20 Javascript