2012-08-03 140 views
-1

我有一個JSF表:如何更改鏈接顏色JSF表

enter image description here

正如你可以看到列的名稱是基本的HTML鏈接。有沒有辦法刪除名稱的下劃線?還要改變名稱的顏色?感謝您的幫助。

<div id="settingsHashMap" style="width:1050px; height:400px; position:absolute; background-color:r; top:20px; left:1px"> 

       <h:form id="form" > 
        <p:growl id="growl" showDetail="true" sticky="true" /> 
        <!-- The sortable data table --> 
        <h:dataTable onmouseover="addOnclickToDatatableRows();" id="dataTable" value="#{AccountsController.dataList}" binding="#{table}" var="item"> 
         <!-- Check box --> 
         <h:column> 
          <f:facet name="header"> 
           <h:selectBooleanCheckbox value="#{AccountsController.mainSelectAll}" class="checkall" > 
            <f:ajax listener="#{AccountsController.selectAll}" render="@form" /> 
           </h:selectBooleanCheckbox> 
          </f:facet> 
          <h:selectBooleanCheckbox onclick="highlight(this)" value="#{AccountsController.selectedIds[item.userid]}" > 
           <!-- if the user deselects one row deselect the main checkbox --> 
           <f:ajax listener="#{AccountsController.deselectMain}" render="@form" /> 
          </h:selectBooleanCheckbox> 
          <!-- Click on table code --> 
          <h:outputLink id="lnkHidden" value="AccountProfile.jsf" style="text-decoration:none; color:white;"> 
           <f:param name="id" value="#{item.userid}" /> 
          </h:outputLink> 
         </h:column> 
         <!-- Row number --> 
         <h:column> 
          <f:facet name="header"> 
           <h:outputText value="№" style="text-decoration:none;color:white;" />          
          </f:facet> 
          <h:outputText value="#{table.rowIndex + AccountsController.firstRow + 1}" /> 
         </h:column> 
         <h:column> 
          <f:facet name="header"> 
           <h:commandLink value="User ID" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;"> 
            <f:attribute name="sortField" value="USERID" /> 
            <f:ajax render="@form" /> 
           </h:commandLink> 
          </f:facet> 
          <h:outputText value="#{item.userid}" /> 
         </h:column> 
         <!-- 
         email 
         description --> 
         <h:column> 
          <f:facet name="header"> 
           <h:commandLink value="Group ID" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;"> 
            <f:attribute name="sortField" value="GROUPID" /> 
            <f:ajax render="@form" /> 
           </h:commandLink> 
          </f:facet> 
          <h:outputText value="#{item.groupid}" /> 
         </h:column> 
         <h:column> 
          <f:facet name="header"> 
           <h:commandLink value="Special Number" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;"> 
            <f:attribute name="sortField" value="SPECIALNUMBER" /> 
            <f:ajax render="@form" /> 
           </h:commandLink> 
          </f:facet> 
          <h:outputText value="#{item.specialnumber}" /> 
         </h:column> 
         <h:column> 
          <f:facet name="header"> 
           <h:commandLink value="Username" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;"> 
            <f:attribute name="sortField" value="USERNAME" /> 
            <f:ajax render="@form" /> 
           </h:commandLink> 
          </f:facet> 
          <h:outputText value="#{item.username}" /> 
         </h:column> 
         <h:column> 
          <f:facet name="header"> 
           <h:commandLink value="Address" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;"> 
            <f:attribute name="sortField" value="ADDRESS" /> 
            <f:ajax render="@form" /> 
           </h:commandLink> 
          </f:facet> 
          <h:outputText value="#{item.address}" /> 
         </h:column> 
         <h:column> 
          <f:facet name="header"> 
           <h:commandLink value="State/Region" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;"> 
            <f:attribute name="sortField" value="STATEREGION" /> 
            <f:ajax render="@form" /> 
           </h:commandLink> 
          </f:facet> 
          <h:outputText value="#{item.stateregion}" /> 
         </h:column> 
         <h:column> 
          <f:facet name="header"> 
           <h:commandLink value="Country" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;"> 
            <f:attribute name="sortField" value="COUNTRY" /> 
            <f:ajax render="@form" /> 
           </h:commandLink> 
          </f:facet> 
          <h:outputText value="#{item.country}" /> 
         </h:column> 
         <h:column> 
          <f:facet name="header"> 
           <h:commandLink value="User Status" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;"> 
            <f:attribute name="sortField" value="USERSTATUS" /> 
            <f:ajax render="@form" /> 
           </h:commandLink> 
          </f:facet> 
          <h:outputText value="#{item.userstatus}" /> 
         </h:column> 
         <h:column> 
          <f:facet name="header"> 
           <h:commandLink value="Telephone" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;"> 
            <f:attribute name="sortField" value="TELEPHONE" /> 
            <f:ajax render="@form" /> 
           </h:commandLink> 
          </f:facet> 
          <h:outputText value="#{item.telephone}" /> 
         </h:column> 
         <h:column> 
          <f:facet name="header"> 
           <h:commandLink value="Date User Added" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;"> 
            <f:attribute name="sortField" value="DATEUSERADDED" /> 
            <f:ajax render="@form" /> 
           </h:commandLink> 
          </f:facet> 
          <h:outputText value="#{item.dateuseradded}" /> 
         </h:column> 

        </h:dataTable> 

        <!-- The paging buttons --> 
        <h:commandButton value="first" action="#{AccountsController.pageFirst}" 
            disabled="#{AccountsController.firstRow == 0}" > 
         <f:ajax render="@form" execute="@form"></f:ajax> 
        </h:commandButton>&nbsp; 


        <h:commandButton value="prev" action="#{AccountsController.pagePrevious}" 
            disabled="#{AccountsController.firstRow == 0}" > 
         <f:ajax render="@form" execute="@form"></f:ajax> 
        </h:commandButton>&nbsp; 

        <h:commandButton value="next" action="#{AccountsController.pageNext}" 
            disabled="#{AccountsController.firstRow + AccountsController.rowsPerPage >= AccountsController.totalRows}" > 
         <f:ajax render="@form" execute="@form"></f:ajax> 
        </h:commandButton>&nbsp;  

        <h:commandButton value="last" action="#{AccountsController.pageLast}" 
            disabled="#{AccountsController.firstRow + AccountsController.rowsPerPage >= AccountsController.totalRows}" > 
         <f:ajax render="@form" execute="@form"></f:ajax> 
        </h:commandButton>&nbsp; 

        <h:outputText value="Page #{AccountsController.currentPage}/#{AccountsController.totalPages}" /> 
        <br /> 

        <!-- The paging links --> 
        <ui:repeat value="#{AccountsController.pages}" var="page"> 
         <h:commandLink value="#{page}" actionListener="#{AccountsController.page}" 
             rendered="#{page != AccountsController.currentPage}" style="text-decoration:none;color:white;"> 
          <f:ajax render="@form" execute="@form"></f:ajax> 
         </h:commandLink> 
         <h:outputText value="#{page}" escape="false" 
             rendered="#{page == AccountsController.currentPage}" style="text-decoration:none;color:white;"/> 
        </ui:repeat> 
        <br /> 

        <!-- Set rows per page --> 
        <h:outputLabel for="rowsPerPage" value="Rows per page" /> 
        <h:inputText id="rowsPerPage" value="#{AccountsController.rowsPerPage}" size="3" maxlength="3" /> 
        <h:commandButton value="Set" action="#{AccountsController.pageFirst}" > 
         <f:ajax render="@form" execute="@form"></f:ajax> 
        </h:commandButton>&nbsp; 
        <h:message for="rowsPerPage" errorStyle="color: red;" /> 

        <!-- hidden button --> 
        <h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none"> 
         <f:ajax render="@form"></f:ajax> 
        </h:commandButton> 

        <!-- the delete button --> 
        <h:button value="Delete" onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" /> 

        <script type="text/javascript" src="resources/js/tabs.js"></script> 
       </h:form>      
      </div> 

      <div id="settingsdivb" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px"> 

      </div> 
     </div> 

回答

5

添加CSS樣式是這樣的:

<h:commandLink value="This is a link" style="text-decoration:none;color:red;" /> 
+0

是的,我錯過了'文本decoration'。最後,我可以問你,我怎樣才能變成黑名單的背景名稱。我嘗試了這樣的樣式:'style =「text-decoration:none; color:white; background-color:black」'但這隻會使文本週圍的顏色爲黑色,而不是帶列名的完整行。 – user1285928 2012-08-03 18:30:23

+0

如果你想要所有的列標題都是相同的,那麼像這樣將CSS樣式類添加到數據表中:否則對於單個列添加其中。 columnHeader {background-color:red;} – Ravi 2012-08-03 18:45:21

+0

是的,這解決了這個問題。謝謝! – user1285928 2012-08-03 18:55:04