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 Study Notes 学习笔记(一)
Aug 04 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
jQuery文字轮播特效
Feb 12 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
Smarty保留变量用法分析
2016/05/23 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
vue实现在线翻译功能
2019/09/27 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
Vuex实现购物车小功能
2020/08/17 Javascript
详解supervisor使用教程
2017/11/21 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
项目经理任命书
2014/06/04 职场文书
支部组织生活会方案
2014/06/10 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python
go goth封装第三方认证库示例详解
2022/08/14 Golang