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，我想为列和具有焦点的元素的线着色。 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 ＆＃34;＃{o.netWt le 1980？＆＃39;现有＆＃39; ：null}＆＃34; 这意味着我已经选择数据表中的任何一个列来检查它是否满足某些条件，如果它不是我显示现有的类CSS否则为null。其中现有的是CSS类。现存的 background-color：＃0E8C3A！important; background-image：none！important; 颜色：＃E0EEEE！重要;
}

Answer 4

我想你已经尝试为你的组件分配一个类名并链接一个本地CSS表了吗？应该工作。

样式JSF数据表与primefaces

4 个答案: