`

AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（上）

框架prototypeAjaxJavaScriptCSS 
阅读更多
        数据分页显示，是很普遍的需求，传统的实现大多是基于服务器端导航的，这种设计采用同步方式进行数据传输，用户体验很差。下面是我在学习ajax的过程中，实现的一个解决方案，不知道设计得怎么样，所以想发出来给大家参考下，恳请给予建议和指导，狗狗感激不尽！

需求概述：需要将二维数据通过表格展现给客户端，用户可以事先选择每页显示的条目数，以及数据获取方式（静态获取、异步缓存，以及异步非缓存）。三种方式简述如下——
        1、静态获取方式：
                 一次性获取全部数据，切换页面显示时，不再发起新的异步查询，适合少量数据的分页显示。
        2、异步缓存方式：
                 分次异步获取页面内容，并缓存访问过的页面内容，下一次访问相同页面时，直接显示缓存内容，适合量较大且内容更        新频率慢的数据显示。
        3、异步非缓存方式：
                 与第二种方式类似，只是并不缓存页面内容，每次切换新页面都发起一次异步请求，适合更新频率快的数据显示。

使用技术：
        客户端——
        1、使用table定义二维数据结构，这是table最合理的使用方式；
        2、使用css控制页面展现；
        3、使用javascript发起异步查询，以及操作页面dom元素。为加快开发速度，采用成熟的Prototype框架简化复杂度。

        服务器端——
         1、因为只是原型设计，决定采用Groovy脚本生成响应数据快速展示。只要遵循数据传输格式，能很快替换为别的实现。
         2、采用MySql做数据存储，模仿分页数据。

实现过程：
        首先，设计静态效果页面，注意按照web标准采用合适的xhtml结构，并使用css控制其表现，页面代码如下，为简单起见，这里把css代码直接写到head头中：
xml 代码
 
  1. <html>  
  2.     <head>  
  3.         <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>  
  4.         <title>分页模板</title>  
  5.         <style type="text/css">  
  6.             * {  
  7.                 margin: 0;  
  8.                 padding: 0;  
  9.                 font: 12px 宋体;  
  10.             }  
  11.             body {  
  12.                 text-align: center;  
  13.             }  
  14.             #option {  
  15.                 margin: 20px auto;  
  16.             }  
  17.             #items{  
  18.                 width: 4em;  
  19.             }  
  20.             #TMPwrap {  
  21.                 text-align: center;  
  22.                 margin-top: 10px;  
  23.             }  
  24.             #pages {  
  25.                 margin: 10px auto;  
  26.                 border-collapse: collapse;  
  27.                 border: 1px #666 solid;  
  28.             }  
  29.             #pages caption {  
  30.                 width: 100%;  
  31.             }  
  32.             #pages th {  
  33.                 padding: 0.5em;  
  34.                 border-right: 1px #B9B4A1 solid;  
  35.                 background: #ECE9D8 url("images/theadbg.gif") repeat-x bottom;  
  36.                 text-align: center;               
  37.             }  
  38.             #pages td {  
  39.                 border: 1px #B9B4A1 solid;  
  40.                 border-top: none;  
  41.                 padding: 0.5em;  
  42.             }  
  43.             #navigation {  
  44.                 margin: 10px;  
  45.                 text-align: center;  
  46.             }  
  47.             #navigation a {  
  48.                 margin-right: 8px;  
  49.                 color: black;  
  50.             }  
  51.             #navigation a.active {  
  52.                 text-decoration: none;  
  53.                 color: red;  
  54.                 cursor: default;  
  55.             }  
  56.             .hidden {  
  57.                 display: none;  
  58.             }  
  59.         </style>          
  60.     </head>  
  61.     <body>  
  62.         <div id="option">  
  63.             <label for="items">每页显示条数：</label>  
  64.             <input id="items" type="text" value="4" />  
  65.             <label for="type">获取方式：</label>  
  66.             <select id="type">  
  67.                 <option value="Static">静态</option>  
  68.                 <option value="AsyncCache">异步缓存</option>  
  69.                 <option value="Async">异步非缓存</option>  
  70.             </select>  
  71.             <input id="display" type="button" value="显 示" />          
  72.         </div>  
  73.         <div id="TMPwrap">  
  74.             <table id="pages">  
  75.                 <caption>静态分页模板</caption>  
  76.                 <thead>  
  77.                 <tr>  
  78.                     <th>标题一</th>  
  79.                     <th>标题二</th>  
  80.                     <th>标题三</th>  
  81.                     <th>标题四</th>  
  82.                     <th>标题五</th>  
  83.                     <th>标题六</th>  
  84.                 </tr>  
  85.                 </thead>  
  86.                 <tbody class="">  
  87.                     <tr>  
  88.                         <td>1</td>  
  89.                         <td>1</td>  
  90.                         <td>1</td>  
  91.                         <td>1</td>  
  92.                         <td>1</td>  
  93.                         <td>1</td>  
  94.                     </tr>  
  95.                     <tr>  
  96.                         <td>2</td>  
  97.                         <td>2</td>  
  98.                         <td>2</td>  
  99.                         <td>2</td>  
  100.                         <td>2</td>  
  101.                         <td>2</td>  
  102.                     </tr>  
  103.                     <tr>  
  104.                         <td>3</td>  
  105.                         <td>3</td>  
  106.                         <td>3</td>  
  107.                         <td>3</td>  
  108.                         <td>3</td>  
  109.                         <td>3</td>  
  110.                     </tr>  
  111.                     <tr>  
  112.                         <td>4</td>  
  113.                         <td>4</td>  
  114.                         <td>4</td>  
  115.                         <td>4</td>  
  116.                         <td>4</td>  
  117.                         <td>4</td>  
  118.                     </tr>  
  119.                 </tbody>  
  120.             </table>  
  121.             <div id="navigation">  
  122.                 <a href="#" class="active">1</a>  
  123.                 <a href="#">2</a>  
  124.                 <a href="#" class="">3</a>  
  125.             </div>  
  126.         </div>  
  127.     </body>  
  128. </html>  


这样我们就制作了一个包含四行数据的表格。注意这里html标签的运用，使用thead、tbody将表格内容分成逻辑块，在后面的设计中，我们会把每一页的内容生成一个tbody。为保证兼容性，对表格的修饰，比如边框、背景、底色这些，最好在单元格（td或者th）中设定，以确保在不同的浏览器中具有相似的显示效果。


接下来的内容，请参看：

AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计（中）
  • 大小: 14.3 KB
分享到：
| 为你的IDE选择合适的字体
评论
1 楼 crabboy 2007-09-18  
不知怎么样，回头我试试i
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AJAX表格分页模板：探讨基于Prototype框架的javascript面向对象设计

    火龙果软件工程技术中心 数据分页显示，是很普遍的需求，传统的实现大多是基于服务器端导航的，这种设计采用同步方式进行数据传输，用户体验很差。下面是我在学习ajax的过程中，实现的一个解决方案，不知道设计得...

    程序天下:JavaScript实例自学手册

    9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    程序描述：本章使用Prototype封装的Ajax对象实现上传文件时显示进度条的功能。当上传文件时，客户端同时显示文件上传的进度，从而及时了解文件传送情况。 /test.html 上传文件 /periodcal.jsp 上传文件...

    《程序天下：JavaScript实例自学手册》光盘源码

    第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 ...22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...

    AJAX 源码范例

    原书附带光盘文件 第2章 02/ 基于Ajax的留言板示例 第3章 03/3.1.3.html JavaScript在Ajax中的作用范例 03/3.4.6.html 加入注释，实现九九乘法表 03/3.4.11.html 使用逻辑表达式...

    asp.net知识库

    与DotNet数据对象结合的自定义数据对象设计 (一) 数据对象与DataRow ASP.NET中大结果集的分页[翻译] .net 2.0 访问Oracle －－与Sql Server的差异，注意事项，常见异常 Ado.net 与NHibernate的关系？ 动态创建数据库...

    Web开发敏捷之道-应用Rails进行敏捷Web开发-第三版.rar

    9.2 迭代D2：创建基于Ajax的购物车 91 9.3 迭代D3：高亮显示变化 94 9.4 迭代D4：隐藏空购物车 96 9.5 迭代D5：JavaScript被禁用时的对策 99 9.6 我们做了什么 99 第10章 任务E：付账！ 101 10.1 迭代E1：收集订单...

    GoodProject Maven Webapp.zip

    jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用...

    千方百计笔试题大全

    1、面向对象的特征有哪些方面? 8 2、作用域public,private,protected,以及不写时的区别？ 8 3、String 是最基本的数据类型吗? 8 4、float 型float f=3.4是否正确? 8 5、语句float f=1.3；编译能否通过？ 8 6、short ...

    java面试宝典

    1、面向对象的特征有哪些方面? 8 2、作用域public,private,protected,以及不写时的区别？ 8 3、String 是最基本的数据类型吗? 8 4、float 型float f=3.4是否正确? 8 5、语句float f=1.3；编译能否通过？ 8 6、short ...

Magicbox
Global site tag (gtag.js) - Google Analytics