如何将样式应用于 PrimeFaces 数据表?

Posted

技术标签:

【中文标题】如何将样式应用于 PrimeFaces 数据表?【英文标题】:How to apply style to a PrimeFaces dataTable? 【发布时间】:2013-11-12 05:33:59 【问题描述】:

最初,我有一个 JSF 数据表 2.0,如下所示:

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

看起来像这样:

我想使用行选择,所以我切换到 PrimeFaces 4.0 数据表:

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

看起来像这样:

但是,我的样式类 tabletable-hover 没有被应用。这是如何引起的,我该如何解决?

【问题讨论】:

浏览***.com/questions/11988415/…并检查它是否回答了您的问题 抱歉,这对我没有帮助。 【参考方案1】:

获取 Primefaces 版本的 Primefaces 用户指南here。 在该文档中,您将了解如何在 Skinning 标题下覆盖每个组件的样式。 例如: 以下是p:outputLabel的换肤

如果你想改变颜色,我会使用我的 CSS,因为它适用于所有 p:outputLabels。

.ui-outputlabel
color:blue;
   

如果您只想更改一个特定 p:outputLabel 的样式,您可以像这样使用

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

那么 CSS 会是这样的:

.myLabel .ui-outputlabel
    color:blue;

【讨论】:

谢谢,但是我用的是 Bootstrap,没有更快的方法吗? 这没有回答问题。另外,链接无效。【参考方案2】:

嗯...不是tableStyleClass-属性,必须是table table-striped吗?

你只使用了styleClass

【讨论】:

【参考方案3】:

在 primefaces 中,基本样式是 jquery 的控制器。您可以更改 dataTable 样式更改 dataTable 的主题 css 样式。如果您想使用 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;

【讨论】:

谢谢,但我使用的是 Bootstrap,没有更快的方法吗? @FernandoPaladini - 从这里自定义您的引导表布局 css 并集成到您的代码中。 getbootstrap.com/customize/#variables-tables【参考方案4】:

您可以根据 Primefaces 用户指南根据您使用的 Prime Faces 版本更改样式。例如对于数据表,下一张图片告诉您类和适用于哪个组件。 您可以在此处查看最新版本 6.2 的用户指南

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

我发布了一个示例来说明我如何从 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%;
    

我希望它可以帮助某人。亲切的问候!

【讨论】:

【参考方案5】:

我正在使用 primefaces 6.0

dataTable 中有选项 tableStyle,你可以使用你在 style 中使用的所有东西 例如:

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" >

【讨论】:

以上是关于如何将样式应用于 PrimeFaces 数据表?的主要内容,如果未能解决你的问题,请参考以下文章

清除primefaces样式

如何使用自定义样式覆盖默认的 PrimeFaces CSS?

Primefaces 中全局更改的默认样式

如何将PrimeFaces p:selectManycheckbox值插入数据库

如何将样式应用于超越其他元素边界的文本范围?

如何将JavaScript侦听器添加到PrimeFaces Ajax事件