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(大數據量時的分頁處理)
- 導出