使用 primefaces 样式化 JSF 数据表答案

【问题标题】：Style JSF datatable with primefaces使用 primefaces 样式化 JSF 数据表
【发布时间】：2011-05-18 09:30:04
【问题描述】：

如何使用 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>

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

【问题讨论】：

样式数据表的哪一部分？
@Cagatay Civici 标题和行（例如更改行的颜色：白色、蓝色、白色、蓝色...）
@Optimmus，您需要更具体一些并向我们展示您尝试过的操作。
@Cagatay Civici 首先我要感谢您的回复...
@Cagatay Civici 这是我尝试做的代码：我用这个代码添加了一个新的数据表，但过滤器输出区域不显示： ...更多列

标签： jsf primefaces

【解决方案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;
}

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

【讨论】：

我不明白这个 id="xyzDataTable" 和 data.id
xyzDataTable 是 p:dataTable 的简单随机 ID，而 data.id 是我的数据源的 ID 列，因为我使用编号的数据源，所以我只设置每个偶数（每秒line) 与另一种背景颜色。
@Optimmus ,@Cagatay Civici 可以比较两个日期，例如rowStyleClass="#{bean.date1 lt currentDate ?'red':'blue'}"

【解决方案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';
      }
  }

【讨论】：

【解决方案3】：

例如，您可以在数据表中使用 primefaces 的 rowStyleClass "#{o.netWt le 1980 ? 'existing' : null}" 这意味着我已经选择了数据表中的任何一个列来检查它是否满足特定条件，如果它不显示现有的类 CSS，否则为 null。现有的是一个 CSS 类，如 . 现有的 {
背景颜色：#0E8C3A ！重要；背景图像：无！重要；颜色：#E0EEEE !important;
}

【讨论】：

【解决方案4】：

我认为您已经尝试为组件分配类名并链接本地 CSS 表，对吧？那应该可以工作。

【讨论】：