Primefaces roweditor 与其他按钮位于同一列 [英] Primefaces roweditor in same column with other buttons

问题描述

我有使用 roweditor 的数据表.一切正常，但我需要在我有铅笔按钮进行编辑的列中添加更多按钮.那个其他"按钮总是在铅笔下方.我试过 <p:panelgrid columns="3"... 但是当我这样做时，行编辑是不可能的.我想问题在于行编辑附带的其他两个按钮(ui-icon-check 和 ui-icon-close).任何人都可以给我一个想法吗?这是我的数据表:

 <f:facet name="header">#{resources['db_parametri.title']}</f:facet><p:ajax event="rowSelect"/><p:ajax event="rowUnselect"/><p:ajax event="rowEdit" listener="#{attrsBean.onEdit}"update=":aswdatatable:form:messages, :aswdatatable:form:sifarnikTable, :aswdatatable:form:noviBtn"/><p:ajax event="rowEditCancel" listener="#{attrsBean.onCancel}"update=":aswdatatable:form:messages"/><p:columns id="columns" var="column" value="#{attrsBean.columns}"style="#{column.css}" width="#{column.width}"sortBy="#{row[column.property]}"filterStyle="#{attrsBean.columnCSS}"filterBy="#{attrsBean.showFilter==false ? null : row[column.property]}"><f:facet name="header"><h:outputText value="#{column.header}"/></f:facet><p:cellEditor><f:facet name="输出"><h:outputText value="#{row[column.property]}"/></f:facet><f:facet name="输入"><p:inputText value="#{row[column.property]}" style="width:96%"></p:inputText></f:facet></p:cellEditor></p:columns><p:column style="width:6px" exportable="false" ><p:rowEditor/>
<h:panelGroup layout="block"><p:cellEditor><f:facet name="输出"><p:commandLink id="deleteBtn"onclick="datatableWidget.unselectAllRows();datatableWidget.selectRow(#{rowIndex}, false);brisanjeWidget.show()"进程="@this"更新=":aswdatatable:form:brisanjeDisplay, :aswdatatable:form:sifarnikTable"styleClass="ui-icon ui-icon-trash"><f:setPropertyActionListenertarget="#{attrsBean.modelForDelete}" value="#{row}"/></p:commandLink></f:facet><f:facet name="输入"><h:outputText value=""/></f:facet></p:cellEditor></h:panelGroup>

</p:列></p:dataTable>

解决方案

设置的style="width: 100%"属性代码>.这样，该列将调整大小以适应任何其他组件.柱子的跨度只能受任何封闭容器的尺寸限制.例如

 <p:dataTable var="car" value="#{tableBean.carsSmall}" id="carList" editable="true"><p:column id="controlColumn" style="width:100%"><p:rowEditor/><p:commandButton value="测试"/></p:列></p:dataTable></h:panelGrid>

在上面的代码片段中，controlColumn 的跨度受 theGrid 的宽度限制

I have datatable in which I use roweditor. Everything works fine but I need to add few more buttons in column in which I have pencil button for editing. That "other" button is always below pencil. I've tried <p:panelgrid columns="3"... but when I did that row edithing wasn't possible. I suppose that the problem is with the other two buttons that come with row editing, (ui-icon-check and ui-icon-close). Can anyone give me an idea? Here is my datatable:

        <p:dataTable id="sifarnikTable" rowIndexVar="rowIndex" 
            value="#{attrsBean.listOfDataBeans}" editable="true" 
            selectionMode="multiple" selection="#{attrsBean.selektovani}"
            widgetVar="datatableWidget" var="row" rowKey="#{row.primaryKey}"
            paginator="true" paginatorPosition="bottom" 
            paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
            currentPageReportTemplate="{startRecord} - {endRecord} / {totalRecords}"
            emptyMessage="#{messages['datatable.emptymessage']}" rows="15"
            sortMode="multiple" paginatorAlwaysVisible="false" 
            filteredValue="#{attrsBean.filteredDatatableList}">
            <f:facet name="header">
                #{resources['db_parametri.title']}
            </f:facet>

            <p:ajax event="rowSelect" />
            <p:ajax event="rowUnselect" />

            <p:ajax event="rowEdit" listener="#{attrsBean.onEdit}"
                update=":aswdatatable:form:messages, :aswdatatable:form:sifarnikTable, :aswdatatable:form:noviBtn" />

            <p:ajax event="rowEditCancel" listener="#{attrsBean.onCancel}"
                update=":aswdatatable:form:messages" />

            <p:columns id="columns" var="column" value="#{attrsBean.columns}" 
                style="#{column.css}" width="#{column.width}"
                sortBy="#{row[column.property]}"
                filterStyle="#{attrsBean.columnCSS}"
                filterBy="#{attrsBean.showFilter==false ? null : row[column.property]}">
                <f:facet name="header">
                    <h:outputText value="#{column.header}" />
                </f:facet>
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{row[column.property]}" />
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText value="#{row[column.property]}" style="width:96%"></p:inputText>
                    </f:facet>
                </p:cellEditor>

            </p:columns>
            <p:column style="width:6px" exportable="false" >                
                <p:rowEditor />
                <div
                    onclick="datatableWidget.unselectAllRows();datatableWidget.selectRow(#{rowIndex}, false);">
                    <h:panelGroup layout="block">
                        <p:cellEditor>
                            <f:facet name="output">

                                <p:commandLink id="deleteBtn"
                                    onclick="datatableWidget.unselectAllRows();datatableWidget.selectRow(#{rowIndex}, false);brisanjeWidget.show()"
                                    process="@this"
                                    update=":aswdatatable:form:brisanjeDisplay, :aswdatatable:form:sifarnikTable"
                                    styleClass="ui-icon ui-icon-trash">

                                    <f:setPropertyActionListener
                                        target="#{attrsBean.modelForDelete}" value="#{row}" />
                                </p:commandLink>
                            </f:facet>
                            <f:facet name="input">
                                <h:outputText value="" />

                            </f:facet>
                        </p:cellEditor>
                    </h:panelGroup>
                </div>
            </p:column>


        </p:dataTable>

解决方案

Set the style="width: 100%" attribute of the <p:column/>. With that, the column will resize to cater for any additional components. The span of the column can then only be limited by the size of any enclosing container. For example

 <h:panelGrid id="theGrid" style="width:200px">
    <p:dataTable var="car" value="#{tableBean.carsSmall}" id="carList" editable="true">  
        <p:column id="controlColumn" style="width:100%">  
            <p:rowEditor />
            <p:commandButton value="Testing"/>
        </p:column> 
    </p:dataTable>
</h:panelGrid>

In the snippet above, span of controlColumn is constrained by the width of theGrid

这篇关于Primefaces roweditor 与其他按钮位于同一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！