jQuery EasyUI 数据网格 - 添加分页组件

  本实例演示如何从服务器端加载数据,如何添加分页组件(pagination)到数据网格(datagrid)。

  创建数据网格(DataGrid)

  为了从远程服务器端加载数据,您应该设置 'url' 属性,在您的服务器端应该返回 JSON 格式数据。请看数据网格(datagrid)文档得到更多关于它的数据格式信息。

  

  url="datagrid2_getdata.php"

  title="Load Data" iconCls="icon-save"

  rownumbers="true" pagination="true">

  

  

  

  

  

  

  

  

  

  

  

Item ID Product ID List Price Unit Cost Attribute Stauts

  我们定义数据网格(datagrid)列,并设置 'pagination' 属性为 true,它将在数据网格(datagrid)的底部生成一个分页(pagination)工具栏。pagination将发送两个参数到服务器:

  page:页码,起始值 1。

  rows:每页显示行。

  服务器端代码

  $page = isset($_POST['page']) ? intval($_POST['page']) : 1;

  $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;

  // ...

  $rs = mysql_query("select count(*) from item");

  $row = mysql_fetch_row($rs);

  $result["total"] = $row[0];

  $rs = mysql_query("select * from item 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-datagrid2.zip

  本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

雷林鹏分享:jQuery EasyUI 数据网格 - 添加分页组件的更多相关文章

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

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

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加查询功能

    jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中.然后演示如何根据用户输入的搜索关键词搜寻显示结果. 创建数据网格( ...

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

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

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑

    jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...

  5. 雷林鹏分享:jQuery EasyUI 数据网格 - 扩展编辑器

    jQuery EasyUI 数据网格 - 扩展编辑器 一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据. 所有的编辑器(editor)都定义在 $.fn.datag ...

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

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

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建复杂工具栏

    jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

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

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

随机推荐

  1. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165211

    目录 软件和镜像下载 虚拟机软件 Kali系统的下载 Kali系统安装 网络配置 设置共享文件夹和剪切板 安装VMware增强工具 设置共享文件夹 设置共享剪切板 更新软件源 软件和镜像下载 虚拟机软 ...

  2. SCOI 2018 划水记

    (此处不应有目录,省选爆零的过程得慢慢看) Day -n 一诊 说真的,在没看到“第一次诊断性考试”之前,一直以为是“一整”,真是可怕,初中教育都开始像UW中的最高祭司学习了. 感觉题目很gg.于是考 ...

  3. topcoder srm 689 div1 -3

    1.给出一个$2*n$的矩阵,只包含小写字母.重新排列各个元素使得任意两个相邻的元素不相同? 思路:按照每种字符的数量降序排序,然后从多到少依次放每一种.放的时候一上一下交错放置. #include ...

  4. Bootstrap3基础 glyphicon 设置图标的颜色与大小

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  5. vi如何设置自动缩进?

    答:  tab 空格数设置为4,加入以下五行到~/.vimrc即可 set smartindent set tabstop= set shiftwidth= set expandtab set sof ...

  6. C# lock 关键字的一些理解

    C# lock 关键字的一些理解 问题1:谁是锁? lock 这个关键字,并不是“锁”,真正的“锁”是那个被lock的Object类型的“对象”,请注意,这里为“对象”加了双引号着重强调被lock的是 ...

  7. 放棋子|2012年蓝桥杯B组题解析第七题-fishers

    (13')放棋子 今有 6 x 6 的棋盘格.其中某些格子已经预先放好了棋子.现在要再放上去一些,使得:每行每列都正好有3颗棋子.我们希望推算出所有可能的放法.下面的代码就实现了这个功能. 初始数组中 ...

  8. 常用Iview样式布局

    type 布局模式,可选值为flex流式布局或不选,在现代浏览器下有效 flex 布局下的垂直对齐方式,align可选值为top.middle.bottom flex 布局下的水平排列方式,justi ...

  9. 【ASP.Net】publish asp.net to local IIS

    做web项目难免要将项目部署, 要么部署在azure上,要么部署在本地, 使用IIS去host. 部署步骤很简单, 1. vs打开你的web项目, 项目名上面右键选择publish 2. 在弹出的pu ...

  10. Kylin简介

    来源 Cube: 用空间换时间(类似:BI分析) 预计算把用户需要查询的维度以及他们所对应的考量的值,存储在多维空间里 当用户查询某几个维度的时候,通过这些维度条件去定位到预计算的向量空间,通过再聚合 ...