冷藏食品包含什么食品:[Apache Click快速开发]Click的多彩table组件

[Apache Click快速开发]Click的多彩table组件

Click的Table组件很强大，当我第一次看到它的时候，就喜欢上它了。。

一个简便的table只需要几行java代码就可以完成，而模板（与java类对应的htm）中可以简化到只剩$table一个标签。

view plaincopy to clipboard?

1. private Table table;  

1. table = new Table("empList")  

1. addControl(table);  

1. table.setClass(Table.CLASS_ITS);  
2. table.setPageSize(5);  
3. table.setShowBanner(true);  
4. table.setHoverRows(true);  

1. Column id = new Column("id", "序号");  
2. id.setWidth("50px");  
3. id.setTextAlign("center");  
4. table.addColumn(id);  
5.           
6. Column name = new Column("name", "姓名");  
7. name.setWidth("120px");  
8. name.setTextAlign("center");  
9. table.addColumn(name);  
10.           
11. Column gender = new Column("gender", "性别");  
12. gender.setWidth("50px");  
13. table.addColumn(gender);  
14.           
15. Column birth = new Column("birth", "出生日期");  
16. birth.setWidth("100px");  
17. birth.setSortable(true);  
18. table.addColumn(birth);  
19.           
20. Column email = new Column("email", "电子邮箱");  
21. email.setWidth("120px");  
22. email.setAutolink(true);  
23. table.addColumn(email);  
24.           
25. Column tel = new Column("tel", "联系电话");  
26. tel.setWidth("100px");  
27. table.addColumn(tel);  
28.           
29. Column job = new Column("job", "职位");  
30. job.setWidth("100px");  
31. table.addColumn(job);  
32.           
33. Column salary = new Column("salary", "工资");  
34. salary.setFormat("${0,number,#,##0.00}");  
35. salary.setTextAlign("right");  
36. salary.setWidth("120px");  
37. salary.setSortable(true);  
38. table.addColumn(salary);  
39.           
40. table.setDataProvider(new DataProvider() {  
41.     public List getData() {  
42.         return es.getEmpList();  
43.     }  
44. });  

几行代码，一个漂亮的表格就出来了，而且看到某些行上面的小箭头，就知道它还知道排序功能，而电子邮件中显示为超链接，也仅仅需要设置一个值。

而且，它还有11种可选的颜色样式，分别为：blue1,blue2,complex,isi,its,mars,nocol,orange1,orange2,report,simple 其中its是默认样式。

complex

isi

orange1

report

click中包含有2中样式的分页条，如果觉得不够，还可以自定分页条，以此来满足应用的需要。

下面是自带的2中分页条：

对于第二种分页条，或者也可以显示到表格外面（默认的）

在2中样式的分页都不能满足要求的时候，你就需要自定义了。需要在初始化table的时候重写其renderPaginator方法

view plaincopy to clipboard?

1. table = new Table("empList"){  
2.     @Override  
3.     protected void renderPaginator(HtmlStringBuffer buffer) {  
4.         renderPagingControl(buffer);  
5.     }  
6. };  

1. private void renderPagingControl(HtmlStringBuffer buffer){  
2.     int pageSize = table.getPageSize();  
3.     int rowCount = table.getRowCount();  
4.     int numPage = (rowCount+pageSize-1)/pageSize;  
5.     String style = "width:20px;height:20px;padding:4px;margin-left:2px;border:1px solid grey;font-size:10pt";  
6.     buffer.append("第一页");  
7.     buffer.append("前一页");  
8.     for(int i=1; i<=numPage; i++){  
9.         if(i==table.getPageNumber()+1){  
10.             buffer.append(""+i+"");  
11.         }else{  
12.             buffer.append(""+i+"");  
13.         }  
14.     }  
15.     buffer.append("后一页");  
16.     buffer.append("最后一页");  
17. }  

这样基本能满足需求，但我还想给表格中的工资来个汇总，并把合计显示到表格的最后2行。大概的样子是这样的：

于是，用和自定义分页条类似的方法，在初始化table的时候同时重写其renderFooterRow方法

view plaincopy to clipboard?

1. @Override  
2. protected void renderFooterRow(HtmlStringBuffer buffer) {  
3.     renderFooter(buffer);  
4. }  

1. private void renderFooter(HtmlStringBuffer buffer){  
2.     float total_salary = 0;  
3.     float sub_total_salary = 0;  
4.     int sub_begin = table.getPageNumber()*table.getPageSize();  
5.     int sub_end = (table.getPageNumber()+1)*table.getPageSize();  
6.     for(int i=0; i
7.         Person ps = (Person)table.getRowList().get(i);  
8.         float salary = ps.getSalary();  
9.         total_salary += salary;  
10.         if(i>=sub_begin&&i
11.             sub_total_salary += salary;  
12.         }  
13.     }  
14.     String subFormat = "小计:   ${0,number,#,##0.00}";  
15.     String totalFormat = "总计:   ${0,number,#,##0.00}";  
16.         String subTotalDisplay = MessageFormat.format(subFormat, new Float(sub_total_salary));  
17.         String totalDisplay = MessageFormat.format(totalFormat, new Float(total_salary));  
18.         int cols = table.getColumnList().size();  
19.         buffer.append("");  
20.         buffer.append(subTotalDisplay);  
21.         buffer.append("");  
22.         buffer.append(totalDisplay);  
23.         buffer.append("");  
24. }  

把所有的样式列出来，可以动态改变表格样式；可以改变分页显示条数；选择是否有高亮条； 

view plaincopy to clipboard?

1. private Form style_form = new Form("style_form");  
2. private Select table_style = new Select("table_style","样式");  
3. private Checkbox table_hover = new Checkbox("table_hover", "高亮条");  
4. private Select page_size = new Select("page_size","每页(条)");  

1. addControl(style_form);  

1. style_form.setStyle("font-size", "10pt");  
2. style_form.setColumns(3);  
3. table_style.addAll(Table.CLASS_STYLES);  
4. table_style.setAttribute("onchange", "style_form.submit();");  
5. style_form.add(table_style);  
6. page_size.addAll(new String[]{"5","10","20","30"});  
7. page_size.setAttribute("onchange", "style_form.submit();");  
8. style_form.add(page_size);  
9. table_hover.setAttribute("onclick", "style_form.submit();");  
10. style_form.add(table_hover);  

view plaincopy to clipboard?

1. @Override  
2. public void onPost() {  
3.     style_form.saveState(getContext());  
4. }  
5. @Override  
6. public void onRender() {  
7.     table.setClass(table_style.getValue());  
8.     table.setPageSize(Integer.parseInt(page_size.getValue()));  
9.     table.setHoverRows(table_hover.isChecked());  
10. }  

Apache Click的表格组件还是很不错，对于用户自定义组件很给力。。