Primefaces数据表-圆角-如何

Question

在FireFox 18上测试我的代码。

我正试图在素数的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插件有可能达到这种效果吗？

Answer 1

我不熟悉jQuery corner插件，也没有心情查看它的源代码，看看它在哪里失败了，但你也可以自己添加必要的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-all样式类添加到<p:dataTable> 中即可

<p:dataTable ... styleClass="ui-corner-all">

Answer 2

如果.ui-accordio.ui-accardioheader是分配给数据表的类，则可以这样做-

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

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