刪除ui狀態錯誤cellEditor素數

Question

我想在像這樣的素字面上使用validateLongRange將inputText放在cellEditor內：

<p:contextMenu for="dataTableAvaliacao" widgetVar="cMenu">
    <p:menuitem value="Edit Cell" icon="ui-icon-search"
        onclick="PF('cellNota').showCellEditor();return false;" />     
    <p:menuitem value="Hide Menu" icon="ui-icon-close"
        onclick="PF('cMenu').hide()" />    
</p:contextMenu>  
<p:dataTable 
    id="dataTableAvaliacao" var="aluno"
    value="#{alunoAvaliacaoMB.alunos}"
    editable="true" editMode="cell" 
    widgetVar="cellNota">   
        <p:columns id="coluna-nota"
            value="#{alunoAvaliacaoMB.colunasAvaliacoes}" var="avaliacao"
            columnIndexVar="colIndex" > 
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText
                            value="#{aluno.getNota(avaliacao.property).vlNotaString}" /> 
                    </f:facet>
                    <f:facet name="input">    
                        <p:inputText id="inputNota"
                            value="#{aluno.getNota(avaliacao.property).vlNotaString}">
                            <f:validateLongRange maximum="10" minimum="-10" />                                     
                        </p:inputText>
                    </f:facet>  
                </p:cellEditor> 
        </p:columns>
</p:dataTable>

問題是發生驗證錯誤時，primefaces會繪制inputText和cellEditor，外觀如下所示：

如何清除Gridcell的UI狀態錯誤 ？ 我嘗試使用jQuery： $（'。ui-state-error'）。removeClass（'ui-state-error'），但我不知道將其放在哪里。

我正在使用sentinel-layout 。 http://primefaces.org/layouts/sentinel

抱歉圖片和代碼中的葡萄牙語單詞。

UPDATE

我無法更改CSS（顯然），因為inputText和cellgrid都使用素數生成的相同樣式。

下面兩張圖片顯示了這一點。

首先是inputText的樣式

第二格格風格

如何更改CSS而不影響兩個組件？ 我仍在尋找一種使用jQuery刪除類的方法。 我可以使用jQuery刪除樣式。

Answer 1

一種簡單的方法是使用任何默認值來覆蓋該特定案例的樣式。 然后Primefaces可以更改樣式類-沒有人會注意到：

td.ui-editable-column.ui-state-error{
   border: 1px solid #dadada !important; // Or whatever is the default color.
                                         // Figure out using inspect element 
                                         // on a non error cell.
}

簡而言之，只有在同一 td標簽上可以使用ui-editable-column和ui-state-error樣式類時，才應用此樣式。 因此它不會影響輸入，因為

• 輸入沒有td -tag
• 輸入沒有ui-editable-column類。

參見小提琴：“ double”選擇器在您的用例中應該可以正常工作：

請注意，一個td beeing class="ui-editable-column ui-state-error"沒有紅色邊框，即使由於ui-state-error而應具有紅色邊框。

https://jsfiddle.net/2607kt05/1/

Answer 2

首先，感謝您的所有幫助。

我已經解決了在樣式屬性上添加一些屬性的問題，例如：

<p:columns id="coluna-nota" style="height: 25px;width:25px; border: solid 1px #E5EBF0 !important;"
            value="#{alunoAvaliacaoMB.colunasAvaliacoes}" var="avaliacao"
            columnIndexVar="colIndex" > 

這不是我想做的最好方法，但是這是我唯一可以解決問題的方法，這可能是由於我對Web開發的經驗不足：)