3

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プラグインでこの効果を達成することは可能ですか?

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 に答える