Question

在开发网页时，我在顶部用搜索字段调整Primeface表。搜索字段应该根据用户键入的内容搜索几乎所有列的内容。以下是该表的图像：

为了使顶部字段按预期工作，似乎需要激活每个所需列的搜索系统（可以在Primeface's own show case page中看到更好的理解）。但是，这些字段在视觉上是不受欢迎的，因此已经使用代码

隐藏在.css文件中

.filter_box{
width: 0px;
height: 0px;
opacity: 0 !important;    
}

结果，搜索字段不再显示，但它所在的空间继续导致设计问题（参见上图：左边的红色方块指出隐藏空间字段的空间是，并且右边的箭头指出了所需的设计）。

作为网络开发的新手，我的问题是：我如何使用搜索系统，而不是展示它而不留下这样的设计缺陷？是否可以在不使用Primeface的搜索系统的情况下在顶部完全使用我的搜索字段？（我尝试在列的配置中简单地删除该部分，但是由于顶部的搜索字段显示结果，所以它没有工作）

作为补充，现在是我的代码：

<ui:composition template="/logged_template.xhtml">
        <ui:define name="content">
            <h:form id="hidden_misc">
                <h:inputHidden value="#{equipMiscBean.setList(usuariosBeanCrt.usuario.nivelAcesso, usuariosBeanCrt.usuario.empresas)}" />
            </h:form>
            <h:form id="misc">
                <p:panel styleClass="tabela_view" visible="#{dash_menu.get_menu_access(usuariosBeanCrt.usuario,'4')}" >
                    <p:dataTable 
                        id="equip_table" 
                        value="#{equipMiscBean.list_equip}" 
                        widgetVar="itensTable"
                        var="item"
                        emptyMessage="Itens não encontrados"
                        filteredValue="#{equipMiscBean.list_equip_filtered}" >

                        <f:facet name="header">
                            <p:outputPanel>
                                <h:outputText value="Busca: " />
                                <p:inputText id="globalFilter" 
                                             onkeyup="PF('itensTable').filter()" 
                                             style="min-width: 200px" 
                                             placeholder="Entre com a palavra chave"/>
                            </p:outputPanel>
                        </f:facet>                        

                        <!--Column Equipamento-->
                        <p:column 
                            headerText="Equipamento" 
                            filterBy="#{item.nome}"
                            filterMatchMode="contains"
                            filterable="true" >
                            <f:facet name="filter">
                                <p:inputText 
                                    onchange="PF('itensTable').filter()" 
                                    disabled="true"
                                    class="filter_box"
                                    />
                            </f:facet>
                            <h:outputText value="#{item.nome}"/>
                        </p:column>

                        ...

                        <!--Column Details-->
                        <p:column 
                            headerText="Detalhes"
                            style="width: 80px; text-align: center;"  >
                            <h:outputFormat class="ui-button" value="#{item.linkTable}" escape="false" />                            
                        </p:column>
                    </p:dataTable>    
                </p:panel>    
            </h:form>

        </ui:define>
    </ui:composition>

Answer 1

我设法解决了这个问题。这是通过将rendered="false"添加到搜索字段方面的规范来完成的。

<f:facet name="filter">
    <p:inputText 
        onchange="PF('itensTable').filter()" 
        disabled="true"
        rendered="false"
        />
</f:facet>

完成后，不再需要使用filter_box进行.css更改，搜索系统也能正常运行。

使用隐藏搜索字段时，如何重新调整Primeface表中的列标题文本？

1 个答案: