丰富的：dataGrid边框问题丰富的面孔4

Question

我们正在从 jsf 1.2 升级到 jsf 2。 我们使用的是 apache myfaces 2.1 和 rich faces 4.3。

问题是我无法在<rich:dataGrid> 组件周围设置边框。 我看过描述如何删除边框的帖子，但没有人指定如何获得边框。 似乎默认情况下边界较早渲染（当使用富面 3 时它们会出现），但在升级到富面 4 后，则不渲染 默认。 以下是 xhtml sn-p。

<rich:dataGrid value="#{bean.getListValues}"  var="value" columns="1" rowKeyVar="index" id="qsns"
style="border-bottom-width:10px;">


        <h:panelGrid id="qsn#{index+1}"  border="10" columns="2">

                   <h:outputText value="qsn #{index+1}"/>
                   <h:selectOneMenu value="#{value.qsn}">
                 <f:selectItems value="#{bean.qsnPool}" />
                </h:selectOneMenu> 


                <h:outputText value="Answer"/>                                            
                    <h:inputText value="#{value.answer}"/>


        </h:panelGrid>  


</rich:dataGrid>

我还尝试在上面的 sn-p 中为 panelGrid (border="10") 明确设置边框。
和rich：dataGrid（border-bottom-width：10px），但它不能按照url中指定的方式工作：http://docs.jboss.org/richfaces/latest_4_2_X/Component_Reference/en-US/html/chap-Component_Reference-Tables_and_grids.html#sect-Component_Reference-Tables_and_grids-richlist

有人可以帮忙吗？

Answer 1

border-bottom-width:10px; 不起作用，因为 border-bottom-style 是 none。

<rich:datagrid> 周围的边框不是在一个元素上定义的。左边框和上边框在数据网格上定义，类rf-dg。底部和右侧在网格单元格上定义，类rf-dg-c。如果要更改所有边框，则必须覆盖类。

Answer 2

我可以通过以下更改获得所需的行为

.tableClass1 .rf-dg-c{   
      border: 1px solid #000;
}
table.tableClass1.rf-dg{     
     border-collapse:collapse;
}


<rich:dataGrid value="#{bean.getListValues}"  var="value" columns="1" rowKeyVar="index" id="qsns"
styleClass="tableClass1">

        <h:panelGrid id="qsn#{index+1}"  border="10" columns="2">

                 <h:outputText value="qsn #{index+1}"/>
                 <h:selectOneMenu value="#{value.qsn}">
                    <f:selectItems value="#{bean.qsnPool}" />
                 </h:selectOneMenu> 


                 <h:outputText value="Answer"/>                                            
                 <h:inputText value="#{value.answer}"/>


        </h:panelGrid>  

</rich:dataGrid>

通过上述样式类和xhtml代码，完美呈现边框。

第一个样式表呈现网格单元格的边框，第二个样式表折叠 相邻单元格边框之间的空间（因为 cellspacing 属性不适用于 rich:dataGrid）

上述选择器仅适用于本地 <rich:dataGrid> ，这意味着不会影响所有 <rich:dataTables> 的全局

Answer 3

border属性做的不多，尝试使用CSS样式：

 <h:panelGrid style="border: 1px solid #000;"> ...

或者通过类使用 CSS：

<h:panelGrid styleClass="myClass"> ...

在您的 CSS 中：

.myClass {
  border: 1px solid #000;
}