jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据

  数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页。 当滚动垂直滚动条时,数据网格(datagrid)执行 ajax 请求来加载和刷新现有的记录。 整个刷新的行为过程是平稳的没有闪烁。 在本教程中,我们将创建一个数据网格(datagrid),并运用虚拟滚动特性从服务器加载数据。

  创建数据网格(DataGrid)

  为数据网格(datagrid)运用虚拟滚动特性,'view' 属性应该设置为 'scrollview'。 用户应该从数据网格(datagrid)扩展下载 scrollview,并在页面头部引用 scrollview 文件。

  

  

  title="DataGrid - VirtualScrollView"

  data-options="view:scrollview,rownumbers:true,singleSelect:true,

  url:'datagrid27_getdata.php',autoRowHeight:false,pageSize:50">

  

  

  

  

  

  

  

  

  

  

  

  

Inv No Date Name Amount Price Cost Note

  请注意,这里我们不需要使用 pagination 属性,但 pageSize 属性是必需的,这样执行 ajax 请求时,数据网格(datagrid)将从服务器获取指定数量的记录。

  服务器端代码

  datagrid27_getdata.php

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

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

  $items = array();

  date_default_timezone_set('UTC');

  for($i=1; $i<=$rows; $i++){

  $index = $i+($page-1)*$rows;

  $amount = rand(50,100);

  $price = rand(10000,20000)/100;

  $items[] = array(

  'inv' => sprintf("INV%04d",$index),

  'date' => date('Y-m-d',time()+24*3600*$i),

  'name' => 'Name' . $index,

  'note' => 'Note' . $index,

  'amount' => $amount,

  'price' => sprintf('%01.2f',$price),

  'cost' => sprintf('%01.2f',$amount*$price)

  );

  }

  $result = array();

  $result['total'] = 8000;

  $result['rows'] = $items;

  echo json_encode($result);

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid27.zip

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

雷林鹏分享:jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据的更多相关文章

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

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

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

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

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

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

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

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

  5. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序

    jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

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

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

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

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

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

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

随机推荐

  1. 团队作业记账本开发NABCD

    N(Need)需求 现如今大学生的消费存在很大问题,很多情况下都是图一时之快,冲动消费,但是其实这些东西并不是特别需要.这样慢慢的堆积也就导致了大学生月月精光的局面.另外,现在基本上人手一部手机,许多 ...

  2. Memcache&Redis

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.减少数据库读取次数来提高网站速度 先在一台机器安装memcache 然后使用Python 安装pip3 i ...

  3. SparkContext初始化之SparkScheduler初始化

  4. POI导入excel时读取excel数据的真实行数

    有很多时候会出现空的数据导致行数被识别多的情况 // 获取Excel表的真实行数 int getExcelRealRow(Sheet sheet) { boolean flag = false; fo ...

  5. docker+httpd的安装

    docker pull docker.io/httpd //直接这么运行会报“没有conf/httpd.cong这个文件” docker run -d --name httpd2. -p : -p : ...

  6. iot-web增加apis-namespace组件

    1  文件夹复制 apis 2 增加 3 增加module

  7. 【UML】NO.50.EBook.5.UML.1.010-【UML 大战需求分析】- 考勤系统

    1.0.0 Summary Tittle:[UML]NO.50.EBook.1.UML.1.010-[UML 大战需求分析]- 考勤系统 Style:DesignPattern Series:Desi ...

  8. Linux操作系统加固

    1. 账号和口令 1.1 禁用或删除无用账号 减少系统无用账号,降低安全风险. 操作步骤 使用命令 userdel <用户名> 删除不必要的账号. 使用命令 passwd -l <用 ...

  9. metasploit安装,按官网说明

    mkdir -p $HOME/git cd $HOME/git git clone git@github.com:YOUR_USERNAME_FOR_GITHUB/metasploit-framewo ...

  10. Streaming从Spark2X迁移到Spark1.5 summary

    配置文件的加载是一个难点,在local模式下非常容易,但是submit后一直报找不到文件,后来采用将properties文件放在加载类同一个package下,打包到同一个jar中解决. import ...