论坛首页 Web前端技术论坛

AJAX表格分页模板(续):服务器端实现

浏览 8756 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-05-23  
AJAX表格分页模板:探讨基于Prototype框架的javascript面向对象设计(上)
AJAX表格分页模板:探讨基于Prototype框架的javascript面向对象设计(中)
AJAX表格分页模板:探讨基于Prototype框架的javascript面向对象设计(下)
        在前面的三篇文章中,我们循序渐进的完成了三种数据获取方式的表格分页模板,接下来让我们看一下服务器端代码设计。这里出于快速演示的目的,实用 groovy脚本简单实现,日后完全可以替换为别的实现,groovy的快速开发能力,非常适合用来快速展示脑海里的实现,呵呵。
        首先,在mysql中建立一个名为“template”的数据库,再库中创建一个数据表trs,结构图如下(注意如果你设置了不同的用户名和密码,记得在下面的groovy代码里面做相应修改)。在这里我输入了19行测试数据:
id
int(10)
title1
VARCHAR(45)
title2 VARCHAR(45)
title3 VARCHAR(45)
title4 VARCHAR(45)
title5 VARCHAR(45)
title6
VARCHAR(45)

        接下来,针对静态分页模板,也就是一次获取所有分页数据的模板,我们编写一个StaticTemplate.groovy脚本文件,这里使用了groovy servlet:
xml 代码
 
  1. import groovy.sql.Sql  
  2. response.setContentType 'text/html'  
  3. response.setCharacterEncoding 'utf-8'  
  4. db = Sql.newInstance(  
  5.     'jdbc:mysql://localhost/template',  
  6.     'root',  
  7.     'admin',  
  8.     'com.mysql.jdbc.Driver'  
  9. )  
  10. def trs = []  
  11. db.eachRow("select * from trs"){tr->  
  12.     def writer = new StringWriter()  
  13.     def builder = new groovy.xml.MarkupBuilder(writer)  
  14.     builder.tr{  
  15.         td tr.title1  
  16.         td tr.title2  
  17.         td tr.title3  
  18.         td tr.title4  
  19.         td tr.title5  
  20.         td tr.title6  
  21.     }  
  22.     trs += writer.toString()  
  23. }  
  24. db?.close();  
  25. mode = request.getParameter("mode")  
  26. items = Integer.parseInt(request.getParameter("items"))  
  27. out.println "<table id='pages'>"  
  28. out.println """  
  29.     <caption>静态分页模板</caption>  
  30.     <thead>  
  31.         <tr>  
  32.             <th>标题一</th>  
  33.             <th>标题二</th>  
  34.             <th>标题三</th>  
  35.             <th>标题四</th>  
  36.             <th>标题五</th>  
  37.             <th>标题六</th>  
  38.         </tr>  
  39.     </thead>  
  40. """  
  41. for(String tr in trs){  
  42.     def index = trs.indexOf(tr)  
  43.     if(index%items==0){  
  44.         out.println "<tbody class='hidden'>"  
  45.     }  
  46.     out.println tr  
  47.     if(index%items==items-1||index==trs.size()-1){  
  48.         out.println "</tbody>"  
  49.     }  
  50. }  
  51. out.println "</table>"  


        另外,针对动态获取每页数据的分页模板,对应为AsyncTemplate.groovy脚本:
xml 代码
 
  1. import groovy.sql.Sql  
  2. response.setCharacterEncoding 'utf-8'  
  3. mode = request.getParameter("mode")  
  4. items = Integer.parseInt(request.getParameter("items"))  
  5. def db = Sql.newInstance(  
  6.     'jdbc:mysql://localhost/template',  
  7.     'root',  
  8.     'admin',  
  9.     'com.mysql.jdbc.Driver'  
  10. )  
  11. def start = 1  
  12. if(mode=="page"){  
  13.     page = Integer.parseInt(request.getParameter("page"))  
  14.     if(page > 1){  
  15.         start = (page-1)*items + 1  
  16.     }  
  17. }  
  18. def end = start + items - 1  
  19. def pageContent = []  
  20. db.eachRow("select * from trs where id between ${start} and ${end}"){tr->  
  21.     def writer = new StringWriter()  
  22.     def builder = new groovy.xml.MarkupBuilder(writer)  
  23.     builder.tr{  
  24.         td tr.title1  
  25.         td tr.title2  
  26.         td tr.title3  
  27.         td tr.title4  
  28.         td tr.title5  
  29.         td tr.title6  
  30.     }  
  31.     pageContent += writer.toString()  
  32. }  
  33. if(mode=="async"){  
  34.     def trTotal = db.firstRow("select count(*) as total from trs").total  
  35.     if(trTotal<items){  
  36.         items = trTotal  
  37.     }  
  38.     pageTotal = trTotal%items!=0?trTotal.intdiv(items)+1:trTotal.intdiv(items)  
  39.     response.setContentType 'text/html'  
  40.     out.println "<table id='pages'>"  
  41.     out.println """  
  42.         <caption>异步分页模板</caption>  
  43.         <thead>  
  44.             <tr>  
  45.                 <th>标题一</th>  
  46.                 <th>标题二</th>  
  47.                 <th>标题三</th>  
  48.                 <th>标题四</th>  
  49.                 <th>标题五</th>  
  50.                 <th>标题六</th>  
  51.             </tr>  
  52.         </thead>  
  53.     """  
  54.     out.println "<tbody id='default'>"  
  55.     out.println pageContent.join("")  
  56.     out.println """  
  57.         </tbody>  
  58.         <tbody id="swap" class="hidden">      
  59.         </tbody>          
  60.         </table>  
  61.         <script type="text/javascript">  
  62.             template.pageTotal = $pageTotal;  
  63.         </script>  
  64.     """   
  65. }  
  66. else{  
  67.     response.setContentType 'text/xml'  
  68.     int page = Integer.parseInt(request.getParameter("page"))  
  69.     out.println """<tbody>"""  
  70.     out.println pageContent.join("")  
  71.     out.println """</tbody>"""  
  72. }  
  73. db?.close();  


一些解释和技巧:
        由于groovy语法简洁易懂,这里就不全盘解释了,就一些技巧说明一下,如果有兴趣,可以到groovy的官方网站查看相应的教程:http://groovy.codehaus.org/
        1、groovy servlet相比servlet,简化了不少,你可以直接使用绑定对象,比如request、response等,而且,分号和变量声明前的“def”关键字是可选的;
        2、
引入groovy.sql.Sql类后,可以用Sql.newInstance静态方法返回数据库连接对象(可以指定相应的配置参数,如地址、用户名密码等),之后可以利用groovy提供的一系列方便实用的数据获取方法以及闭包,进行日常数据库操作:
java 代码
  1. import groovy.sql.Sql  
  2.   
  3. def db = Sql.newInstance(  
  4.     'jdbc:mysql://localhost/template',  
  5.     'root',  
  6.     'admin',  
  7.     'com.mysql.jdbc.Driver'  
  8. )  
另外,有个技巧可以让我们免于用if语句判断调用方法的对象是否为空,即使db为空,也不会抛出异常,呵呵:
java 代码
  1. db?.close()  

        3、三引号内部的字符串,会按原始格式输出,不需要对特殊字符做转义。而且,和双引号字符串一样,可以使用Gstring变量来动态占位,输出的时候将会把这些占位符替换为实际的变量值,与表达式语言类似:
java 代码
  1. "select * from trs where id between ${start} and ${end}"    // ${变量名}即为占位替换符号  

        4、利用groovy提供的MarkupBuilder,可以很方便的动态构建xml树结构。下面的代码迭代查询结果集的每一行,构建了一个分页数据内容(即tbody元素的tr子节点集):
java 代码
  1. db.eachRow("select * from trs where id between ${start} and ${end}"){tr->  
  2.     def writer = new StringWriter()  
  3.     def builder = new groovy.xml.MarkupBuilder(writer)  
  4.     builder.tr{  
  5.         td tr.title1  
  6.         td tr.title2  
  7.         td tr.title3  
  8.         td tr.title4  
  9.         td tr.title5  
  10.         td tr.title6  
  11.     }  
  12.     pageContent += writer.toString()  
  13. }  

        最后,说一下前面我们设计的js对象的调用方式。在页面中,要显示一个分页表格,只需要指定一个容器div就可以了,比如,页面上有一个id为“
TMPwrap”的div,我们可以这样来实例化分页模板对象,并显示它:
js 代码
  1. var template = new Tbi.StaticTemplate("TMPwrap",4,"StaticTemplate.groovy");  
  2. template.show();  
这样就生成并显示了一个静态分页模板实例,这里的template变量起这个名字,是由于动态分页模板的服务器返回javascript片段中用了这个名字,耦合得比较严重。可以这么改进,将服务器返回的片段代码改为一个函数,客户端eval之后,返回总页数即可:
js 代码
 
  1. function getTotal(){  
  2.         var total = $pageTotal;  
  3.         return total;  
  4. }  

        ok,到这里,ajax表格分页模板示例就告一段落了,最后附上源码供大家参考,见附件。我的环境是:jdk5,tomcat5.5,mysql5.0。 将附件中的Template.war放入tomcat安装目录下的webapps文件夹里,即可通过http: //127.0.0.1/Template/template.htm访问到。

        忘记说一个ie的bug:在生成提示信息的时候,我们通过动态生成一个跨列的单元格来实现,这里有个地方要注意,对于firefox,设置td.colspan = 100就可以了(一般不会有超过100列的表格,所以这个数目足够了),但是对于IE,貌似是区分大小写的,非得这样写才能达到相同的效果,奇怪:td.colSpan = 100。

        预告一下,接下来,会有一篇文章讲解一种用很取巧但不是非常实用的方法,来达到静态的分页效果,特别之处在于,它不需要任何的javascript代码,呵呵,算是奇巧淫技了(ps:不要误会这个词语,不信你可以去翻翻辞典,呵呵)。
  • Template.rar (2.5 MB)
  • 描述: 示例代码
  • 下载次数: 1468
   发表时间:2007-05-31  
这个下载下来,按照你的方法进行安装,等显示页面后,点击显示没有反映
0 请登录后投票
   发表时间:2007-05-31  
请楼主指教
0 请登录后投票
   发表时间:2007-05-31  
Template.rar这个包里怎么没有.class文件?
0 请登录后投票
   发表时间:2007-05-31  
zjwlzwq 写道
这个下载下来,按照你的方法进行安装,等显示页面后,点击显示没有反映


首先,确保你的数据库表建立成功,而且已经有了测试数据在里面。你可以装个firefox,用firebug插件看看服务器返回的响应数据是否正确。

没有class是正常的,为了快速演示,我直接使用groovy servlet脚本编写,是不需要编译成.class的。

我想可能就是数据库的问题,检查一下表是否成功创建,还有数据库的用户名密码等,这个可以在groovy脚本里面直接修改保存即可。
0 请登录后投票
   发表时间:2007-06-07  
里面有文档吗,
没有的话,也打包上传吧,
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics