工作中用表格展示数据的几种方法

    在工作中，常常会有需要用表格来展示获取的数据，在这里记下我目前用过的几种展示方法：

一、用函数循环打印显示

    这个可以说是比较手工的方法，当你取到数据后，写一个循环函数用于打印数据，这个方法在类似JSP、ASP上均可以使用，具体说来就是打印网页，例如下面的代码：

<%Class.forName("oracle.jdbc.driver.OracleDriver").newInstance;
//以下连接数据库代码省略
  while(rs.next){
%>
    <tr>
    <td><%=rs.getString("name");%></td>
    <td><%=rs.getString("sex");%></td>
    </tr>
<%}%>

  如上就在页面上循环打印出了一张表格，写出了我们从数据库获取的数据。

 

二、采用AJAX控件来实现

    网上有很多通过在前台调用后台产生的数据来填充表格的AJAX控件，我使用过的是Jquery flexgrid，这个个比较简单的控件，可以很方便地让你以漂亮的界面来展示数据，并有动态分页功能，其主要属性如下：

   1. height: 200, //flexigrid插件的高度，单位为px  
   2. width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算  
   3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式  
   4. novstripe: false,  
   5. minwidth: 30, //列的最小宽度  
   6. minheight: 80, //列的最小高度  
   7. resizable: true, //是否可伸缩  
   8. url: false, //ajax方式对应的url地址  
   9. method: ‘POST’, // 数据发送方式  
  10. dataType: ‘xml’, // 数据加载的类型  
  11. errormsg: ‘Connection Error’,//错误提升信息  
  12. usepager: false, //是否分页  
  13. nowrap: true, //是否不换行  
  14. page: 1, //默认当前页  
  15. total: 1, //总页面数  
  16. useRp: true, //是否可以动态设置每页显示的结果数  
  17. rp: 15, // 每页默认的结果数  
  18. rpOptions: [10,15,20,25,40],//可选择设定的每页结果数  
  19. title: false,//是否包含标题  
  20. pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式  
  21. procmsg: ‘Processing, please wait …’,//正在处理的提示信息  
  22. query: ”,//搜索查询的条件  
  23. qtype: ”,//搜索查询的类别  
  24. nomsg: ‘No items’,//无结果的提示信息  
  25. minColToggle: 1, //minimum allowed column to be hidden  
  26. showToggleBtn: true, //show or hide column toggle popup  
  27. hideOnSubmit: true,//隐藏提交  
  28. autoload: true,//自动加载  
  29. blockOpacity: 0.5,//透明度设置  
  30. onToggleCol: false,//当在行之间转换时  
  31. onChangeSort: false,//当改变排序时  
  32. onSuccess: false,//成功后执行  
  33. onSubmit: false // 调用自定义的计算函数  

下面是一个简单的例子：

需要导入文件：
flexigrid.css、jquery.js、flexigrid.js

页面添加代码：
<div class="bborderx">
<table id="flex1" style="display:none"></table>
</div>

js代码:
$("#flex1").flexigrid
   (
   {
   url: 'infoIssue/InfoIssue!show.action',
   dataType: 'json',
   colModel : [
    {display: '编号', name : 'issueid', width : 60, sortable : true, align: 'center'},
    {display: '标题', name : 'caption', width : 120, sortable : true, align: 'left'},
    {display: '是否置顶', name : 'maketop', width : 120, sortable : true, align: 'left'},
    {display: '是否发布', name : 'issued', width : 120, sortable : true, align: 'left'}
    ],
   buttons : [
    {name: '增加', bclass: 'add', onpress : test},
    {name: '删除', bclass: 'delete', onpress : test},
    {separator: true}
    ],
   searchitems : [
    {display: '标题', name : 'caption', isdefault: true}
    ],
   sortname: "issueid",
   sortorder: "asc",
   usepager: true,
   title: '新闻发布 ',
   useRp: true,
   rp: 1,
   showTableToggleBtn: true,
   width: 600,
   height: 300
   }
   );
   function test(com,grid)
   {
    if (com=='删除')
     {
         confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?')
     }
    else if (com=='增加')
     {
      alert('增加一条！');
     }   
   }

 

三、使用普元EOS中封装的Datacell控件

    和第二种方法类似，使用控件结合EOS的业务逻辑来实现，其优点主要是能直接在表格中对展现的数据进行修改，具体的使用方法参见EOS的帮助文档。