样式JSF datatable与primefaces

-3

如何样式我的数据表与CSS？我尝试了很多解决方案，但没有任何工作。我尝试了primefaces官方网站和primefaces用户指南中的一个，但都没有工作。样式JSF datatable与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>

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

来源

2011-05-18 Optimmus

样式datatable的哪一部分？ – 2011-05-18 10:09:56

@Cagatay Civici标题和行（改变行的颜色，例如：白色，蓝色，白色，蓝色......） – Optimmus 2011-05-18 11:03:48

@Optimmus，你需要更具体一些，告诉我们你试图去做什么。 – 2011-05-18 11:05:31

我认为有很多方法可以用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; 
}

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

来源

2011-05-24 10:28:27 Ziagl

我不明白这个ID =“xyzDataTable”和data.id – Optimmus 2011-05-28 12:45:17

xyzDataTable是一个简单的随机ID为p：dataTable和data.id是我的数据源的ID列，因为我使用的数据源是编号，所以我只设置每一个偶数（每第二行）与另一种背景颜色。 – Ziagl 2011-05-30 06:44:14

@Optimmus，@ Cagatay Civici可以比较两个日期，比如'rowStyleClass =“＃{bean.date1 lt currentDate？'red'：'blue'}”'' – Arunprasad 2013-10-28 06:57:57

另一种解决方案：您可以使用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'; 
     } 
    }

来源

2011-05-24 10:35:48 Ziagl

你可以在数据表中，例如使用primefaces的rowStyleClass在这里它意味着我选择了任何一个数据表中的列来检查它是否符合某些条件，如果它不显示现有的类CSS否则为空。其中现有的CSS类如。现有{
background-color：＃0E8C3A！important; background-image：none！important; 颜色：＃E0EEEE！重要;
}

来源

2012-01-05 15:26:27 curious

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

来源

2014-05-27 09:45:35

样式JSF datatable与primefaces

回答

相关问题