eXtremeTable用于以表的形式显示数据。基于上篇的环境,现在实现了这样一个小demo:
查询用户,显示用户信息。看看是如何利用eXtremeTable做数据显示的吧。
后台套路不变,传值给页面就行,在action中,分别通过Map和Bean传值。
Map<String, String> map1 = new HashedMap();
map1.put("id", "1");
map1.put("userName", "柳松");
map1.put("loginName", "柳松");
Map<String, String> map2 = new HashedMap();
map2.put("id", "2");
map2.put("userName", "赵辉");
map2.put("loginName", "赵辉");
Map<String, String> map3 = new HashedMap();
map3.put("id", "3");
map3.put("userName", "云姐");
map3.put("loginName", "云姐");
Map<String, String> map4 = new HashedMap();
map4.put("id", "4");
map4.put("userName", "王欢");
map4.put("loginName", "王欢");
List<Map> listMap = new ArrayList<Map>();
listMap.add(map1);
listMap.add(map2);
listMap.add(map3);
listMap.add(map4);
request.setAttribute("userMap", listMap);
用Bean的代码略。
jsp中的数据显示:(需要注意的是,<ec:table>标签会自己生成form,form中包含了分页、排序等用到的各种隐含的标签,如果<ec:table>再套到form里,分页等部分功能会失效)
<ec:table items="userMap"
var="map"
action="http://localhost:8080/struts_login/userList.do"
imagePath="${ctx}/images/table/*.gif"
title="用户信息"
width="100%">
<ec:row highlightRow="true">
<ec:column property="id号">${list.id }</ec:column>
<ec:column property="用户名">${list.userName }</ec:column>
<ec:column property="登录名">${list.loginName }</ec:column>
</ec:row>
<!--如果通过Map传值,直接通过属性名得到对应的值 -->
<ec:row highlightRow="true">
<ec:column property="id"></ec:column>
<ec:column property="userName"></ec:column>
<ec:column property="loginName"></ec:column>
</ec:row>
</ec:table>
数据显示:
好了,现在我们看到了,就是通过<ec:table> 和<ec:row> ,数据就完整显示了,而且分页是可以使用的。
下面开始介绍具体都有哪些方便的功能。
- 分页(设置每页显示数量,参数自动传递)
- 高亮显示行
- 行上的js操作
- 数据解析和格式化
- 过滤和排序
- Limit(大数据量时的分页处理)
- 导出