删除 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 的 class。我可以使用 jQuery.

删除样式

Answer 1

一种简单的方法是覆盖使用任何默认值的特定情况的样式。然后 Primefaces 可以更改样式class - 没有人会注意到：

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.
}

简而言之，只有当 classes ui-editable-column AND ui-state-error 样式在 same[=36= 上可用时，才会应用此样式] td-标签。因此它不会影响输入，因为

输入没有td-tag

输入没有ui-editable-columnclass.

请参阅 fiddle："double" 选择器应该非常适合您的用例：

请注意，td 蜂鸣 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" >

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

删除 ui-state-error cellEditor primefaces

Remove ui-state-error cellEditor primefaces

jquery

jsf

primefaces

jsf-2