Primefaces roweditor

Question

되는 I가 roweditor를 사용하여 데이터 테이블 I가있다. 모든 것은 정상적으로 작동하지만 편집을 위해 연필 단추가있는 열에 더 많은 버튼을 추가해야합니다. 그 "기타"버튼은 항상 연필 아래에 있습니다. <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> 

Answer 1

이 <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의 범위 내가와 CSS를 재정의함으로써 해결 theGrid

Answer 2

의 폭에 의해 제한된다

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

Answer 3

Primefaces 5이다. x :

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