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

一种简单的方法是覆盖该特定情况的样式，默认情况下。然后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在相同 td标记上可用时，才会应用此样式。因此它不会影响输入，因为

输入为td - 标记
输入没有ui-editable-column类。

请参阅小提琴：“双”选择器应该对您的用例完全正常：

请注意，td一个class="ui-editable-column ui-state-error"没有红色边框，即使它应该有ui-state-error。

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

Answer 2

首先，感谢您的所有帮助。

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

<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

2 个答案: