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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
详解Vue This$Store总结
Dec 17 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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根据日期判断星座的函数分享
2014/02/13 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
javascript倒计时功能实现代码
2012/06/07 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
python读写json文件的简单实现
2017/04/11 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python3实现转换Image图片格式
2018/06/21 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
Java面试题及答案
2012/09/08 面试题
经理秘书找工作求职信
2013/12/19 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
工作检讨书大全
2015/01/26 职场文书
三八节活动简报
2015/07/20 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
Django实现聊天机器人
2021/05/31 Python