使用素数设置样式 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

例如，

您可以在数据表中使用质数的rowStyleClass "#{o.netWt le 1980 ？现有' ： 空}"这里意味着我已经选择了数据表中的任何一个列来检查它是否满足某些条件，如果没有，我将显示现有的类 CSS，否则为 null。其中存在是一个 CSS 类，例如 .现有 {
背景颜色：#0E8C3A 重要; 背景图片：无！重要; 颜色： #E0EEEE ！重要;
}

Answer 4

我想你已经尝试过给你的组件分配一个类名并链接一个本地的CSS工作表，对吗？ 这应该有效。