富:数据网格边界发布富faces 4

Question

我们正在从jsf 1.2升级到jsf 2，我们使用的是ApachemyFaces2.1和富faces 4.3。

问题是我无法在<rich:dataGrid>组件周围设置边框。我见过描述如何删除边界的帖子，但没有人具体说明如何获得边界。在默认情况下，边框似乎是在默认情况下呈现(在使用富faces 3时出现的)，但是在升级到富faces 4之后，默认情况下不会呈现边框。下面是xhtml片段。

<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>

我还尝试在上面的片段中为panelGrid (border="10")设置边框。

和富:dataGrid(边框-底部宽度:10 in )，但它不是按照url：grids-richlist在url中指定的工作。

有人能帮忙吗？

Answer 1

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

.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代码，边框将完美地呈现出来。

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

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

Answer 2

border-bottom-width:10px;无法工作，因为border-bottom-style是none。

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

Answer 3

边框属性做得不多，请尝试使用CSS样式：

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

或者通过类使用CSS：

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

在您的CSS中：

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