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 数据网格 - 设置排序的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序

    jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...

  3. EasyUI 数据网格 - 设置排序并自定义排序

    数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排序.默认的,列是不能排序的,除非您设置 sortable 属性为 true. 当排序时,数据网格(DataGrid)将 ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色

    jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...

  5. 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列

    jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义分页

    jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上 ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图

    jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建页脚摘要

    jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...

随机推荐

  1. git----------如何安装gitlab,使用步骤。

    1.配置yum源        vim /etc/yum.repos.d/gitlab-ce.repo 2.复制以下内容到打开的文件中: [gitlab-ce]     name=Gitlab CE ...

  2. 北京大学Cousera学习笔记--4-计算导论与C语言基础--计算机的基本原理-程序运行的基本原理

    已知:电路能完成计算 怎么计算:设计好很多个原子电路,需要的时候就把他们临时组装在一起--ENIAC 升级:冯诺依曼-EDVAC(现在的计算机都是) 1.通过某种命令来控制计算机.让计算机按照这种命令 ...

  3. C# 字段和属性

    最大的疑惑就是:有了字段,为什么还要有属性呢? 如果在一个类中有一个公有字段,那么在这个类的外部我们可以自由无阻的使用这个字段,但是如果给这个字段赋了一个很“离谱”的值,那这对程序可能会造成很大的影响 ...

  4. 接口自动化测试持续集成--Soapui接口测试

    接口测试目前笔者掌握的工具有三种: 一.python+requests+jenkins,优点:代码实现接口测试,对测试代码书写比较自由等:缺点:需要测试者需要有一定的代码基础: 二.jmeter+an ...

  5. 求你显示pdf

    123 <iframe src='http://km.shengaitcm.com/ADC/_layouts/15/WopiFrame.aspx?sourcedoc=%2FADC%2FDocLi ...

  6. Python练习:含参数的脚本示例

    首先准备一个example.csv文件,如下: 编写脚本test.py ,实现传入参数,读取example.csv文件,并将其保存为另一个文件, #  含参数的脚本,读取一个文件,并另保存一个文件im ...

  7. CentOS 7 zabbix实现微信报警

    环境 : LAMP  CentOS7  192.168.94.11 首先搭建LAMP环境 , 安装zabbix [root@zabbix-server ~]# wget http://repo.zab ...

  8. 《DRN: A Deep Reinforcement Learning Framework for News Recommendation》强化学习推荐系统

    摘要 新闻推荐系统中,新闻具有很强的动态特征(dynamic nature of news features),目前一些模型已经考虑到了动态特征. 一:他们只处理了当前的奖励(ctr);. 二:有一些 ...

  9. koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

  10. 福州大学软件工程1916|W班 第5次作业成绩排名

    1. 作业链接: https://edu.cnblogs.com/campus/fzu/SoftwareEngineering1916W/homework/2768 2. 评分准则: 本次作业评分分为 ...