Primefaces roweditor與其他按鈕在同一列

我有我在其中使用roweditor的數據表。一切工作正常，但我需要添加更多的按鈕列中，我有鉛筆按鈕進行編輯。該「其他」按鈕始終位於鉛筆下方。我試過<p:panelgrid columns="3"...，但是當我做了這一行以後，就不可能了。我猜想問題出在行編輯中的其他兩個按鈕上（ui-icon-check和ui-icon-close）。任何人都可以給我一個想法嗎？這裏是我的數據表：Primefaces roweditor與其他按鈕在同一列

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

來源

2013-07-23 miroslav_mijajlovic

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

在上面的代碼段中，controlColumn跨度是由theGrid

來源

2013-07-23 18:02:17 kolossus

這不起作用爲了我。在我的數據表中，我有''，之後我有'p：column'。現在它只是刪除按鈕。 –

@miroslav - 你最初沒有在這裏發佈你的代碼，所以我根據經驗回答。儘管如此，用'width =「＃{column.width}」'（這裏你設置了一個固定的寬度）和'style =「width：6px」'，你不能期望得到不同的結果 – kolossus

謝謝你的幫助。我決定使用不同的風格解決方案，這不再是一個問題。 –

寬度餘通過與重寫的CSS解決了這個約束：

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

來源

2013-11-04 13:55:29 mosgjig

在Primefaces 5。 x：

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

來源

2015-03-26 14:34:39 sinclair

Primefaces roweditor與其他按鈕在同一列

回答

相關問題