使用 primefaces 设计 JSF 数据表的样式

Question

如何使用 CSS 设计数据表的样式？我尝试了很多解决方案，但没有任何效果。我尝试了primefaces官网和primefaces用户指南中的一个，但都不起作用。

这是我的代码：

<p:dataTable var="car" value="#{carListController.cars}">
   <p:column filterBy=”#{car.model}”>
      <f:facet name="header"> 
          <h:outputText value="Model" />
      </f:facet>
      <h:outputText value="#{car.model}" />
   </p:column>
   ...more columns 
</p:dataTable>

如果有人可以在这里帮助我，我将非常感激。

Answer 1

我认为使用 CSS 为数据表着色的方法有很多。对我来说，它的工作原理是显示一个列表，其中每个项目也有一个 ID，所以我使用了：

<p:dataTable id="xyzDataTable" var="data" value="#{myBean.data}" 
    selectionMode="single" rowStyleClass="#{data.id mod 2 == 0 ? null : 'old'}">

CSS 文件

.old
{
  background:#fafafa;
}

现在每隔一行都有不同的颜色。

Answer 2

另一种解决方案：您可以使用 JavaScript。对于我的数据表，我想为具有焦点的元素的列和行着色。 DataTable 包含许多 inputText 元素，每个元素在获得焦点时都会调用 JavaScript 函数：

<p:inputText id="xyz" ... onfocus="colorTR(#{data.id},1);" .../>

使用 JavaScript 函数：

//colors row
function colorTR(row, cell){
  var x = document.getElementsByTagName('tr');
  var count = x.length;
  for(var i=0; i!=count; ++i){
    if(x[i].id[0] == 'p'){
      if(i%2 == 0)
        x[i].style.background = '#eeeeee';
      else
        x[i].style.background = '#fafafa';

      var zahl = parseInt(x[i].id[x[i].id.length-2] + x[i].id[x[i].id.length-1]);
      if(isNaN(zahl))
        zahl = parseInt(x[i].id[x[i].id.length-1]);
      if(zahl == row)
        x[i].style.background = '#feac5b';
      }
  }

  //colors column
  x = document.getElementsByTagName('input');
  count = x.length;
  for(var i=0; i!=count; ++i){
    if(x[i].id[0] == 'p'){
      x[i].parentNode.style.background = 'transparent';

      var zahl = parseInt(x[i].id[x[i].id.length-2] + x[i].id[x[i].id.length-1]);
      if(isNaN(zahl))
         zahl = parseInt(x[i].id[x[i].id.length-1]);
      if(zahl == cell)
         x[i].parentNode.style.background = '#feac5b';
    }
  }

  //header column
  x = document.getElementsByTagName('th');
  count = x.length;
  for(var i=0; i!=count; ++i){
    if(x[i].id[0] == 'p'){
      x[i].style.background = '#ffffff';

      var zahl = parseInt(x[i].id[x[i].id.length-2] + x[i].id[x[i].id.length-1]);
      if(isNaN(zahl))
        zahl = parseInt(x[i].id[x[i].id.length-1]);
      if(i == cell)
        x[i].style.background = '#feac5b';
      }
  }

Answer 3

例如，您可以在数据表中使用 primefaces 的 rowStyleClass
“#{o.netWt le 1980？‘现有’：空}”
这里这意味着我选择了数据表中的任何一列来检查它是否满足特定条件，如果不满足，我将显示现有的 CSS 类，否则为 null。
其中现有的是 CSS 类，例如
.现有的{
背景颜色：#0E8C3A！重要；
背景图像：无！重要；
颜色：#E0EEEE！重要；
}

Answer 4

我认为您已经尝试为您的组件分配一个类名并链接本地 CSS 表，对吧？那应该有效。