樣式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

回答

相關問題