工作中用表格展示数据的几种方法
在工作中，常常会有需要用表格来展示获取的数据，在这里记下我目前用过的几种展示方法：一、用函数循环打印显示
这个可以说是比较手工的方法，当你取到数据后，写一个循环函数用于打印数据，这个方法在类似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: ,//可选择设定的每页结果数
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的帮助文档。
页:
[1]