SimpleDataGrid使用方法与dataGrid相似,然而simpleDataGrid采用纯HTML+CSS来实现,而且只提供了常用的显示和选择行的功能(没有单击表头排序、改变列宽、交换列位置等功能)。SimpleDataGrid构件的出现为用户提供了一个快速简洁的表格构件,适用于简单的表格数据显示环境。
表 30.135. 构件信息
| Component Type | org.operamasks.faces.component.grid.UISimpleDataGrid |
| Component Family | javax.faces.Data |
| Component Class | org.operamasks.faces.component.grid.UISimpleDataGrid |
| Tag Class | org.operamasks.faces.webapp.widget.UISimpleDataGridTag |
| Renderer Type | org.operamasks.faces.component.grid.UISimpleDataGrid |
| Renderer Class(AJAX) | org.operamasks.faces.render.widget.ajax.AjaxSimpleDataGridRenderer |
+java.lang.Object
++javax.faces.component.UIComponent
+++javax.faces.component.UIComponentBase
++++javax.faces.component.UIData
+++++org.operamasks.faces.component.widget.page.UIPagedData
++++++org.operamasks.faces.component.grid.base.UISimpleDataGridBase
+++++++org.operamasks.faces.component.grid.UISimpleDataGrid
表 30.136. 属性
| binding | 定义类 | javax.faces.component.UIComponentBase | ||
| 类型 | javax.el.ValueExpression(javax.faces.component.UIComponent) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 一个值表达式,用于把该组件链接到一个ManagedBean的某个属性。 | ||||
| first | 定义类 | org.operamasks.faces.component.widget.page.UIPagedData | ||
| 类型 | javax.el.ValueExpression(int) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 指定显示的数据从哪一行开始 | ||||
| id | 定义类 | javax.faces.component.UIComponentBase | ||
| 类型 | java.lang.String | |||
| 是否必须 | 否 | 延时求值 | 否 | |
| 这个组件的组件标识符。这个值在最近的命名容器类型的父组件范围内,必须是唯一的。 | ||||
| indexVar | 定义类 | org.operamasks.faces.component.widget.page.UIPagedData | ||
| 类型 | java.lang.String(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 标识服务器端的记录集的行号 | ||||
| rendered | 定义类 | javax.faces.component.UIComponentBase | ||
| 类型 | boolean(boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 一个标志,指出该组件是否要在任何随后的form提交过程中被渲染或处理。 这个属性的缺省值是true。 | ||||
| rows | 定义类 | org.operamasks.faces.component.widget.page.UIPagedData | ||
| 类型 | javax.el.ValueExpression(int) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 需要显示的行的数目 | ||||
| selectionColumnIndex | 定义类 | org.operamasks.faces.component.grid.base.UISimpleDataGridBase | ||
| 类型 | javax.el.ValueExpression(int) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件的checkBox列处于第几列,默认值为0,构件的第一列是checkBox | ||||
| selections | 定义类 | org.operamasks.faces.component.grid.base.UISimpleDataGridBase | ||
| 类型 | javax.el.ValueExpression(int[]) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 选中的行号数组 | ||||
| showSelectionColumn | 定义类 | org.operamasks.faces.component.grid.base.UISimpleDataGridBase | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件是否显示checkBox列,默认值是false | ||||
| style | 定义类 | org.operamasks.faces.component.grid.base.UISimpleDataGridBase | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件渲染时应用到构件的CSS风格,对应于元素的style属性 | ||||
| styleClass | 定义类 | org.operamasks.faces.component.grid.base.UISimpleDataGridBase | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 空格分隔的CSS风格类名列表,渲染时作为元素的"class"属性 | ||||
| value | 定义类 | javax.faces.component.UIData | ||
| 类型 | java.lang.String | |||
| 是否必须 | 否 | 延时求值 | 否 | |
| 构件的当前值 | ||||
| var | 定义类 | javax.faces.component.UIData | ||
| 类型 | java.lang.String(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 代表每一行数据的变量 | ||||
simpleDataGridBean的代码:
private Quote[] stockData = new Quote[] {
new Quote("3m Co.", 71.72),
new Quote("Alcoa Inc", 29.01),
new Quote("Altria Group Inc.", 83.81),
new Quote("American Express Company", 52.55),
......
};
@ManagedProperty private int[] selections;
@ManagedProperty private String responseText;
public Object button_action() {
if(selections != null){
StringBuffer buffer = new StringBuffer();
buffer.append("您选中了第");
for(int i : selections){
buffer.append(i + ",");
}
responseText = buffer.toString() + "行!"; }
else{
responseText = "没有选中任何行!";
}
return null;
}SimpleDataGrid.jsp代码:
<w:form>
<w:simpleDataGrid id="mygrid" value="#{simpleDataGridBean.stockData}" var="data"
selections="#{simpleDataGridBean.selections}" showSelectionColumn="true"
selectionColumnIndex="4">
<w:idColumn id="company" header="Company" width="260" value="#{data.company}"> </w:idColumn>
<w:outputColumn id="price" header="Price" width="100" align="center" sortable="true" value="#{data.price}"> </w:outputColumn>
<w:outputColumn id="change" header="Change" width="75" align="center" value="#{data.change}"> </w:outputColumn>
<w:outputColumn id="pct_change" header="% Last Updated" width="160" align="center" value="#{data.lastUpdated}">
<f:convertDateTime pattern="yyyy-MM-dd hh:mm:ss" />
</w:outputColumn>
</w:simpleDataGrid>
<w:pagingLink for="mygrid" pageSize="5" theme="google"></w:pagingLink>
<w:button value="提交" action="#{simpleDataGridBean.button_action}" />
<h:outputText value="#{simpleDataGridBean.responseText}" style="color:red;"></h:outputText>
</w:form>