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

0 0

–>

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

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

private Table table;table = new Table(“empList”)addControl(table);table.setClass(Table.CLASS_ITS);
table.setPageSize(5);
table.setShowBanner(true);
table.setHoverRows(true);Column id = new Column(“id”, “序号”);
id.setWidth(“50px”);
id.setTextAlign(“center”);
table.addColumn(id);
Column name = new Column(“name”, “姓名”);
name.setWidth(“120px”);
name.setTextAlign(“center”);
table.addColumn(name);
Column gender = new Column(“gender”, “性别”);
gender.setWidth(“50px”);
table.addColumn(gender);
Column birth = new Column(“birth”, “出生日期”);
birth.setWidth(“100px”);
birth.setSortable(true);
table.addColumn(birth);
Column email = new Column(“email”, “电子邮箱”);
email.setWidth(“120px”);
email.setAutolink(true);
table.addColumn(email);
Column tel = new Column(“tel”, “联系电话”);
tel.setWidth(“100px”);
table.addColumn(tel);
Column job = new Column(“job”, “职位”);
job.setWidth(“100px”);
table.addColumn(job);
Column salary = new Column(“salary”, “工资”);
salary.setFormat(“${0,number,#,##0.00}”);
salary.setTextAlign(“right”);
salary.setWidth(“120px”);
salary.setSortable(true);
table.addColumn(salary);
table.setDataProvider(new DataProvider<Person>() {
public List<Person> getData() {
return es.getEmpList();
}
});

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

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

complex

isi

orange1

report

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

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

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

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

table = new Table(“empList”){
@Override
protected void renderPaginator(HtmlStringBuffer buffer) {
renderPagingControl(buffer);
}
};private void renderPagingControl(HtmlStringBuffer buffer){
int pageSize = table.getPageSize();
int rowCount = table.getRowCount();
int numPage = (rowCount+pageSize-1)/pageSize;
String style = “width:20px;height:20px;padding:4px;margin-left:2px;border:1px solid grey;font-size:10pt”;
buffer.append(“<a href=’#’ style='”+style+”‘>第一页</a>”);
buffer.append(“<a href=’#’ style='”+style+”‘>前一页</a>”);
for(int i=1; i<=numPage; i++){
if(i==table.getPageNumber()+1){
buffer.append(“<a href=’#’ style='”+style+”color:red;font-weight:bold;background:lightgrey’>”+i+”</a>”);
}else{
buffer.append(“<a href=’#’ style='”+style+”‘>”+i+”</a>”);
}
}
buffer.append(“<a href=’#’ style='”+style+”‘>后一页</a>”);
buffer.append(“<a href=’#’ style='”+style+”‘>最后一页</a>”);
}完成之后的样子很粗犷，这里只是一种思路，美工的工作就得用点心思去慢慢干了。

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

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

@Override
protected void renderFooterRow(HtmlStringBuffer buffer) {
renderFooter(buffer);
}private void renderFooter(HtmlStringBuffer buffer){
float total_salary = 0;
float sub_total_salary = 0;
int sub_begin = table.getPageNumber()*table.getPageSize();
int sub_end = (table.getPageNumber()+1)*table.getPageSize();
for(int i=0; i<table.getRowCount(); i++){
Person ps = (Person)table.getRowList().get(i);
float salary = ps.getSalary();
total_salary += salary;
if(i>=sub_begin&&i<sub_end){
sub_total_salary += salary;
}
}
String subFormat = “<b>小计</b>: ${0,number,#,##0.00}”;
String totalFormat = “<b>总计</b>: ${0,number,#,##0.00}”;
String subTotalDisplay = MessageFormat.format(subFormat, new Float(sub_total_salary));
String totalDisplay = MessageFormat.format(totalFormat, new Float(total_salary));
int cols = table.getColumnList().size();
buffer.append(“<tfoot><tr><td colspan='”+cols+”‘ style=’text-align:right’>”);
buffer.append(subTotalDisplay);
buffer.append(“</td></tr><tr><td colspan='”+cols+”‘ style=’text-align:right’>”);
buffer.append(totalDisplay);
buffer.append(“</td></tr></tfoot>”);
}感觉很好，继续给表格做几个选项吧。

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

private Form style_form = new Form(“style_form”);
private Select table_style = new Select(“table_style”,”样式”);
private Checkbox table_hover = new Checkbox(“table_hover”, “高亮条”);
private Select page_size = new Select(“page_size”,”每页(条)”);addControl(style_form);style_form.setStyle(“font-size”, “10pt”);
style_form.setColumns(3);
table_style.addAll(Table.CLASS_STYLES);
table_style.setAttribute(“onchange”, “style_form.submit();”);
style_form.add(table_style);
page_size.addAll(new String[]{“5″,”10″,”20″,”30”});
page_size.setAttribute(“onchange”, “style_form.submit();”);
style_form.add(page_size);
table_hover.setAttribute(“onclick”, “style_form.submit();”);
style_form.add(table_hover);初始化选项form后，还需要重写page的onPost和onRender方法，来保持表单选项状态和改变表格渲染状态。

@Override
public void onPost() {
style_form.saveState(getContext());
}
@Override
public void onRender() {
table.setClass(table_style.getValue());
table.setPageSize(Integer.parseInt(page_size.getValue()));
table.setHoverRows(table_hover.isChecked());
}这样就能顺利的完成效果了。

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

本文来源互联网收集，文章内容系作者个人观点，不代表本站对观点赞同或支持。如需转载，请注明文章来源,如您发现有涉嫌抄袭侵权的内容，请联系本站核实处理。