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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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
解析zend Framework如何自动加载类
2013/06/28 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
送货司机岗位职责
2013/12/11 职场文书
司马光教学反思
2014/02/01 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
诚信承诺书
2015/01/19 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
Python多线程 Queue 模块常见用法
2021/07/04 Python