2007-05-14

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

关键字: ajax 分页 javascript面向对象 css表格 groovy
        数据分页显示，是很普遍的需求，传统的实现大多是基于服务器端导航的，这种设计采用同步方式进行数据传输，用户体验很差。下面是我在学习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面向对象设计（中）
  • Faf3e4e0-1698-49e8-9870-5421a0ac1d0d-thumb
  • 描述:
  • 大小: 14.3 KB
评论
笨笨狗
搜索本博客
我的相册
51da800b-ed84-3570-a91e-391f733272ca-thumb
Everyday Scripting with Ruby 中文版
共 1 张
存档
最新评论