6

最初に、次のように JSF データテーブル 2.0 を用意しました。

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

次のようになります。

PrimeFaces DataTable を使用する前に (選択した行が何であるかを調べる必要があります

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

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

次のようになります。

Primefaces を使用した後 (ただし、選択した行をまだ検出できません:(

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

4

5 に答える 5

12

お使いの Primefaces のバージョンの Primefaces ユーザー ガイドをこちらから入手してください。そのドキュメントでは、スキニングの見出し
の下にある各コンポーネントのスタイルをオーバーライドする方法を見つけることができます。 例: 以下は、

p:outputLabel

ここに画像の説明を入力

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

.ui-outputlabel{
color:blue;
}

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

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

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

.myLabel .ui-outputlabel{
    color:blue;
}
于 2013-11-01T02:48:01.283 に答える
5

うーん...それはtableStyleClass- 属性ではありませんtable table-stripedか?

あなただけ使ったstyleClass

于 2014-03-17T13:17:28.330 に答える
2

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

于 2013-11-01T04:35:06.810 に答える