Primefaces roweditor 与其他按钮位于同一列答案

【问题标题】：Primefaces roweditor in same column with other buttonsPrimefaces roweditor 与其他按钮位于同一列
【发布时间】：2013-07-23 12:01:21
【问题描述】：

我有使用 roweditor 的数据表。一切正常，但我需要在我有铅笔按钮进行编辑的列中添加更多按钮。那个“其他”按钮总是在铅笔下面。我试过<p:panelgrid columns="3"...，但是当我这样做时，行编辑是不可能的。我想问题在于行编辑附带的另外两个按钮（ui-icon-check 和ui-icon-close）。谁能给我一个想法？这是我的数据表：

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

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

在 Primefaces 5.x 中：

.ui-row-editor:after {
     clear: none !important;
}

【讨论】：

【解决方案2】：

我通过覆盖 css 解决了这个问题：

.ui-row-editor{ display: inline; }

【讨论】：

【解决方案3】：

设置<p:column/> 的style="width: 100%" 属性。这样，该列将调整大小以适应任何其他组件。然后，列的跨度只能受任何封闭容器的大小限制。例如

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

在上面的sn-p中，controlColumn的span受theGrid的宽度约束

【讨论】：

这对我不起作用。在我的数据表中我有<p:columns>，之后我有p:column。目前只有删除按钮。
@miroslav - 你最初没有在这里发布你的代码，所以我根据经验回答。尽管如此，使用width="#{column.width}"（在这里你设置一个固定宽度）和style="width:6px"，你不能期待不同的结果
感谢您的帮助。我决定使用不同风格的解决方案，这不再是问题了。
@kolossus 我也有同样的问题，按钮不在同一个级别，如果你解决了，你能发布你的解决方案吗？

【解决方案4】：

另一种解决方案：

.ui-row-editor {
    float: left;
}

【讨论】：

只有这个对我有用，即使它现在没有垂直居中对齐（这需要更多地摆弄 CSS，尽管与此同时 UI 已经改变，所以我不会尝试它）谢谢！

【解决方案5】：

我的另一个解决方案：

.ui-row-editor{
    display: inline-block;
}

【讨论】：