雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序
jQuery EasyUI 数据网格 - 设置排序
本实例演示如何通过点击列表头来排序数据网格(DataGrid)。

数据网格(DataGrid)的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的,列是不能排序的,除非您设置 sortable 属性为 true。
创建数据网格(DataGrid)
url="datagrid8_getdata.php"
title="Load Data" iconCls="icon-save"
rownumbers="true" pagination="true">
| Item ID | Product ID | List Price | Unit Cost | Attribute | Stauts |
|---|
我们定义一些可排序的列,包含 itemid、productid、listprice、unitcost 等等。'attr1' 列和 'status' 列不能排序。
当排序时,数据网格(DataGrid)将发送两个参数到远程服务器:
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);
下载 jQuery EasyUI 实例
jeasyui-datagrid-datagrid8.zip
本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)
雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序的更多相关文章
- 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列
jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序
jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...
- EasyUI 数据网格 - 设置排序并自定义排序
数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排序.默认的,列是不能排序的,除非您设置 sortable 属性为 true. 当排序时,数据网格(DataGrid)将 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列
jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义分页
jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框
jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图
jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建页脚摘要
jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...
随机推荐
- memcached----------linux下安装memcached,以及php的memcached扩展。
1.通过wget http://www.memcached.org/files/memcached-1.4.24.tar.gz下载最新源码2.解压tar -xf memcached-1.4.24.ta ...
- Vue系列之 => MintUI初使用
安装 npm i mint-ui -S main.js import Vue from 'vue' // 1,导入 vue-router包 import vueRouter from 'vue-rou ...
- Vue系列之 => webpack的url loader
安装: npm i url-loader file-loader -D //url-loader内部依赖file-loader webpack.config.js const path = requ ...
- 20175205 2018-2019-2 《Java程序设计》第五周学习总结
20175205 2018-2019-2 <Java程序设计>第五周学习总结 教材学习内容总结 接口:使用关键字interface定义接口 接口声明:interface 接口名 接口体:接 ...
- 按Enter登录,Esc退出
回车登录,下图处,选择登录按钮的方法 下图是按ESC
- prometheus监控
一. 部署prometheus 1.1 下载 wget https://github.com/prometheus/prometheus/releases/download/v2.7.1/promet ...
- P4859 已经没有什么好害怕的了(dp+二项式反演)
P4859 已经没有什么好害怕的了 啥是二项式反演(转) 如果你看不太懂二项式反演(比如我) 那么只需要记住:对于某两个$g(i),f(i)$ ---------------------------- ...
- Java 键盘输入数字(空格隔开) 将数字存入数组
Scanner sc = new Scanner(System.in); String inputString = sc.nextLine(); String stringArray[] = inpu ...
- spring-petclinic性能调优实战(转)
1.spring-petclinic介绍 spring-petclinic是spring官方做的一个宠物商店,结合了spring和其他一些框架的最佳实践. 架构如下: 1)前端 Thymeleaf做H ...
- 设计的一些kubernetes面试题目
这几个月参与了几场面试,设计了多道面试题,觉得可以综合考察应聘人对kubernetes的掌握情况.在这里分享下,供应聘人自查以及其他面试官参考. 这些面试题的设计初衷并不是考察kubernetes的使 ...