Wicket で tableタグ表示、列毎に異なる back ground 色を表示する場合、
(偶数列、奇数列で色を指定する場合のテクニック)
CSSスタイル属性、class 名をwicket IDで展開される tr タグに属性をつけることになる。
Java ソースは、、、
import org.apache.wicket.AttributeModifier;
import org.apache.wicket.extensions.markup.html.repeater.data.sort.OrderByBorder;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.navigation.paging.PagingNavigator;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.repeater.Item;
import org.apache.wicket.markup.repeater.data.DataView;
import org.apache.wicket.model.AbstractReadOnlyModel;
public class SamplelistPage extends WebPage{
public SamplelistPage(){
// org.apache.wicket.markup.repeater.data.IDataProvider 実装インスタンスを
// 指定して、→ new SampleDataProvider()
// org.apache.wicket.markup.repeater.data.DataView を作成する。
DataView<Sample> dataView = new DataView<Sample>("pageable",new SampleDataProvider()){
@Override
protected void populateItem(final Item<Sample> item){
Sample sample = item.getModelObject();
item.add(new Label("id",String.valueOf(sample.getId())));
item.add(new Label("firstname",sample.getFirstName()));
item.add(new Label("lastname"sample.getLastName()));
// class 属性を指定
item.add(new AttributeModifier("class"
,true,new AbstractReadOnlyModel<String>(){
@Override
public String getObject(){
return (item.getIndex() % 2 == 1) ? "even" : "odd";
}
}
)
);
}
};
}
}
-----------------------------------------------
tableタグは、、、
<table cellspacing="0" class="dataview">
<tr>
<th>ID</th>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr wicket:id="pageable">
<td><span wicket:id="id">[id]</span></td>
<td><span wicket:id="firstname">[firstname]</span></td>
<td><span wicket:id="lastname">[lastname]</span></td>
</tr>
</table>
------------------------------------------------
CSSは、、、、
table.dataview {
margin-bottom: 10px;
border-bottom: 1px solid #0079d6;
font-size: 8pt;
font-family: arial;
}
table.dataview tr.even { background-color: #ffebcd; }
table.dataview tr.odd { background-color: #fffccc; }