3

在 FireFox 18 上测试我的代码。

我正在尝试在primefaces的桌子上获得圆角p:dataTable......

为此，我使用了 jQuery 插件Corner。

我在 xhtml 的末尾添加了以下脚本部分：

<script>
$(".ui-datatable table").corner();
</script>

然而，桌角不会变圆。

表格的 xhtml 是：

            <p:dataTable var="row" value="#{myBean.rows}">  
                <p:column headerText="">  
                    <h:outputText value="#{row.name}" />  
                </p:column>  

                <p:column headerText="Address">  
                    <h:outputText value="#{row.address}" />  
                </p:column>  

                <p:column headerText="10 mins">  
                    <h:outputText value="#{row.gt10min}" />  
                </p:column>  

                <p:column headerText="20 mins">  
                    <h:outputText value="#{row.gt20min}" />  
                </p:column>

                <p:column headerText="30 mins">  
                    <h:outputText value="#{row.gt30min}" />  
                </p:column>  
            </p:dataTable>

jQuery 链接到 xhtml，因为当我尝试它时效果会应用于其他元素。

我在这里想念什么？

是否可以通过我正在使用的 jQuery 插件或其他 jQuery 插件来实现此效果？

4

2 回答 2

6

我对 jQuery 角插件不熟悉，也没有心情查看它的源代码以了解它失败的地方，但您也可以自己输入必要的 CSS。

.ui-datatable.ui-corner-all table {
    border-collapse: separate;
    *border-collapse: collapse; /* Fallback for IE <=7. */
    border-spacing: 0; 
}
.ui-datatable.ui-corner-all table tr:first-child th:first-child {
    -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0;
}
.ui-datatable.ui-corner-all table tr:first-child th:last-child {
    -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0;
}
.ui-datatable.ui-corner-all table tr:first-child th:only-child{
    -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
}
.ui-datatable.ui-corner-all table tbody td {
    border-top: 0;
    *border-top: inherit; /* Fallback for IE <=7. */
}
.ui-datatable.ui-corner-all table tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px;
}
.ui-datatable.ui-corner-all table tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0;
}
.ui-datatable.ui-corner-all table tr:last-child td:only-child{
    -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
}

要让它运行，只需将ui-corner-allstyleclass 添加到<p:dataTable>

<p:dataTable ... styleClass="ui-corner-all">
于 2013-02-05T10:31:35.743 回答
0

如果 .ui-accordion .ui-accordion-header 是分配给数据表的类，您可以这样做 -

<script>
$(document).ready(function() {
    $(".ui-accordion .ui-accordion-header").corner();
});
</script>

但是你最好使用 CSS 来做圆角。

于 2013-02-04T22:14:36.370 回答