删除 ui-state-error cellEditor primefaces

Question

我想在这样的primefaces上使用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-state-error？ 我曾尝试使用 jQuery：$('.ui-state-error').removeClass('ui-state-error') 但我不知道该放在哪里。

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

对不起，图片和代码中的葡萄牙语单词。

更新

我无法更改 CSS（显然）因为 inputText 和 cellgrid 都使用由 primefaces 生成的相同样式。

下面两张图片显示了这一点。

首先是inputText的样式

gridcell的第二种样式

如何在不影响两个组件的情况下更改 CSS？ 我仍在寻找一种使用 jQuery 删除类的方法。我可以使用 jQuery 删除样式。

Answer 1

首先，感谢您的帮助。

我已经解决了在样式属性上添加一些属性的问题，例如：

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

这不是我想做的最好的方法，但这是我唯一可以解决问题的方法，可能是因为我没有网络开发经验:)

Answer 2

一种简单的方法是覆盖该特定情况的样式并使用任何默认值。然后 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.
}

简而言之，仅当样式类 ui-editable-column 和 ui-state-error 在 same td-tag 上可用时，才会应用此样式。因此它不会影响输入，因为

• 输入没有td-tag
• 输入没有ui-editable-column 类。

看小提琴：“双”选择器应该非常适合您的用例：

请注意，td 蜜蜂 class="ui-editable-column ui-state-error" 没有红色边框，即使由于 ui-state-error 而应该有。

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