web-dev-qa-db-ja.com

PrimeFaces dataTableにスタイルを適用する方法は？

最初は、次のようなJSFデータテーブル2.0を持っています。

<h:dataTable value="#{bean.items}" var="item" styleClass="table table-hover">

これは次のようになります。

Before use PrimeFaces DataTable (I need discover what's the selected row

行選択を使用したかったので、PrimeFaces 4.0データテーブルに切り替えました。

<p:dataTable value="#{bean.items}" var="item" styleClass="table table-hover"
    rowKey="#{item.id}" selection="#{bean.selectedItem}" selectionMode="single">

これは次のようになります。

After use Primefaces (but can't discover the selected row yet :(

ただし、私のスタイルクラスtableおよびtable-hoverは適用されていません。これはどのように引き起こされ、どうすれば解決できますか？

cssjsfjsf-2primefacesdatatable
6
Paladini

Primefaces here のバージョンのPrimefacesユーザーガイドを入手してください。
そのドキュメントでは、Skinningという見出しの下に、各コンポーネントのスタイルをオーバーライドする方法が記載されています。
例えば：
以下はp:outputLabelのスキンです

enter image description here

色を変更したい場合は、すべてのp:outputLabelsに適用されるcssを使用します。

.ui-outputlabel{
color:blue;
}

特定のp:outputLabelのみのスタイルを変更する場合は、次のように使用できます

<div class="myLabel">
   <p:outputLabel value="This is Demo" />
</div>

その場合、CSSは次のようになります。

.myLabel .ui-outputlabel{
    color:blue;
}
13
Kishor Prakash

うーん...それはtableStyleClass-属性ではなく、table table-stripedでなければなりませんか？

styleClassのみを使用しました

4
Rokko_11

Primefacesでは、基本的なスタイルはjqueryによるコントローラーです。 dataTableのテーマcssスタイルを変更して、dataTableスタイルを変更できます。 jquery themerollerを使用してオンザフライでスタイルを変更する場合は、このリンクを確認してください http://www.datatables.net/styling/themes

以下は、dataTableの担当cssセグメントです。必要に応じて変更し、cssファイルに追加してください

.ui-datatable table{
        border-collapse:collapse;width:100%;
}
.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer{
        text-align:center;padding:4px 10px;
}
.ui-datatable .ui-datatable-header{
        border-bottom:0px none;
}
.ui-datatable .ui-datatable-footer{
        border-top:0px none;
}
.ui-datatable thead th, .ui-datatable tfoot td{
        text-align:center;
}
.ui-datatable thead th,.ui-datatable tbody td,.ui-datatable tfoot td{
        padding:4px 10px;
        overflow:hidden;
        white-space:nowrap;
        border-width:1px;
        border-style:solid;
}
.ui-datatable tbody td{
        border-color:inherit;
}
.ui-datatable .ui-sortable-column{
        cursor:pointer;
}
.ui-datatable div.ui-dt-c{
        position:relative;
}
.ui-datatable .ui-sortable-column-icon{
        display:inline-block;
        margin:-3px 0px -3px 2px;
}
.ui-datatable .ui-column-filter{
        display:block;
        width:100px;
        margin:auto;
}
.ui-datatable .ui-expanded-row{
        border-bottom:0px none;
}
.ui-datatable .ui-expanded-row-content{
        border-top:0px none;
}
.ui-datatable .ui-row-toggler{
        cursor:pointer;
}
.ui-datatable tr.ui-state-highlight{
        cursor:pointer;
}
.ui-datatable .ui-selection-column .ui-chkbox-all{
        display:block;
        margin:0px auto;
        width:16px;
        height:16px;
}
.ui-datatable-scrollable table{
        table-layout:fixed;
}
.ui-datatable-scrollable-body{
        overflow:auto;
}
.ui-datatable-scrollable-header,.ui-datatable-scrollable-footer{
        overflow:hidden;
        border:0px none;
}
.ui-datatable-scrollable .ui-datatable-scrollable-header,.ui-datatable-scrollable .ui-datatable-scrollable-footer{
        position:relative;
}
 .ui-datatable-scrollable .ui-datatable-scrollable-header td{
        font-weight:normal;
}
.ui-datatable-scrollable-body::-webkit-scrollbar{
        -webkit-appearance:none;
        width:15px;
        background-color:transparent;
}
.ui-datatable-scrollable-body::-webkit-scrollbar-thumb{
        border-radius:8px;
        border:1px solid white;
        background-color:rgba(194,194,194,.5);
}
.ui-datatable .ui-datatable-data tr.ui-state-hover{
        border-color:inherit;
        font-weight:inherit;
        cursor:pointer;
}
.ui-datatable .ui-paginator,.ui-datatable .ui-paginator{
        padding:2px;
}
.ui-column-dnd-top, ui-column-dnd-bottom{
        display:none;
        position:absolute;
}
.ui-column-dnd-top .ui-icon, ui-column-dnd-bottom .ui-icon{
        position:absolute;
        top:-4px;
}
/* InCell Editing */.ui-datatable .ui-cell-editor-input{
        display:none;
}
.ui-datatable .ui-row-editing .ui-cell-editor .ui-cell-editor-output{
        display:none;
}
.ui-datatable .ui-row-editing .ui-cell-editor .ui-cell-editor-input{
        display:block;
}
.ui-datatable .ui-row-editor span{
        cursor:pointer;
        display:inline-block;
}
.ui-datatable .ui-row-editor .ui-icon-pencil{
        display:inline-block;
}
.ui-datatable .ui-row-editing .ui-row-editor .ui-icon-pencil{
        display:none;
}
.ui-datatable .ui-row-editor .ui-icon-check,.ui-datatable .ui-row-editor .ui-icon-close{
        display:none;
}
.ui-datatable .ui-row-editing .ui-row-editor .ui-icon-check,.ui-datatable .ui-row-editing .ui-row-editor .ui-icon-close{
        display:inline-block;
}
.ui-datatable .ui-datatable-data tr.ui-row-editing td.ui-editable-column,.ui-datatable .ui-datatable-data td.ui-cell-editing{
        padding:0;margin:0;
}
/*resizer */.ui-datatable .ui-column-resizer{
        width:8px;height:20px;
        padding:0px;cursor:col-resize;
        background-image:url("/ScraperOnWeb/javax.faces.resource/spacer/dot_clear.gif.jsf?ln=primefaces");
        margin:-4px -10px -4px 0px;
        float:right;
}
.ui-datatable .ui-filter-column .ui-column-resizer{
        height:45px;
}
.ui-datatable .ui-column-resizer-helper{
        width:1px;
        position:absolute;
        z-index:10;
        display:none;
}
.ui-datatable-resizable{
        padding-bottom:1px;/*fix for webkit overlow*/overflow:auto;
}
.ui-datatable-resizable table{
        table-layout:fixed;
}
.ui-datatable-rtl{
        direction:rtl;
}
.ui-datatable-rtl.ui-datatable thead th, .ui-datatable-rtl.ui-datatable tfoot td{
        text-align:right;
}
2
Yup

使用している主な顔のバージョンに応じて、primefacesのユーザーガイドに従ってスタイルを変更できます。たとえばデータテーブルの場合、次の図はクラスと適用されるコンポーネントを示しています。あなたはここで最後のバージョン6.2のユーザーガイドをチェックすることができます

https://www.primefaces.org/docs/guide/primefaces_user_guide_6_2.pdf

enter image description here

enter image description here

私は https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml からデータテーブルショーケースのcssをどのように変更したかを示す例を投稿しています。 。

body {
background-color: #221F4B;
}

.ui-datatable {
    margin: 5% 8% 0 8%;
    text-align: center;
}

.ui-datatable thead th {
    color: #221F4B;
}

.ui-datatable tbody tr {
    height: 5rem;
}

.ui-datatable-even {
    background-color: #DFDFDF;
    color: #221F4B;
}

.ui-datatable-odd {
    background-color: #302C6C;
    color: #A09FB2;
}

@media screen and (min-width: 769px) {
    .ui-datatable {
        margin: 5% 20% 0 20%;
    }
}

誰かのお役に立てば幸いです。敬具！

1
webtechnelson

PrimeFaces 6.0を使用しています

dataTableにはtableStyleオプションがあり、スタイルで使用するすべてのものを使用できます。例：

tableStyle="font-family: sans-serif; border:none;font-size:  small;padding:1px; background-color: #EAF7FC; background:#EAF7FC"

したがって、dataTableは次のようになります。

 <p:dataTable id="tbl" var="fmlist" value="#{testmb.fontList}"
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
                     paginator="true" rows="25" style="margin-bottom:20px" scrollable="true"  draggableRows="false"  cellSeparator="true"  scrollHeight="330" 
                     tableStyle="font-family: sans-serif; border:none;font-size:  small;padding:1px; background-color: #EAF7FC; background:#EAF7FC" >
0
skrk