Primefaces roweditor in derselben Spalte mit anderen Tasten
Habe ich datatable in dem ich roweditor. Alles funktioniert gut, aber ich muss hinzufügen, paar mehr buttons in der Spalte, in der ich "Bleistift" zum Bearbeiten. Dass sich "die anderen" - button ist immer unten Bleistift. Ich habe versucht <p:panelgrid columns="3"...
aber wenn ich die Zeile edithing war nicht möglich. Ich nehme an, dass das problem mit den anderen beiden Tasten, die mit Zeile Bearbeiten (ui-icon-check
und ui-icon-close
). Kann jemand mir eine Idee?
Hier ist meine 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>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Legen Sie die
style="width: 100%"
Attribut des<p:column/>
. Die Spalte wird die Größe zu bieten für zusätzliche Komponenten. Die Spannweite der Spalte kann dann nur von der Größe des umschließenden Containers. Zum BeispielIn dem snippet oben, Spanne
controlColumn
ist beschränkt durch die Breite dertheGrid
<p:columns>
und danach habe ichp:column
. Für jetzt es ist nur die Schaltfläche "löschen".width="#{column.width}"
(hier du bist die Einstellung einer festen Breite) undstyle="width:6px"
Sie können nicht erwarten, dass unterschiedliche ErgebnisseIn Primefaces 5.x:
Ich löste dies durch überschreiben der css-Datei mit:
.ui-row-editor{
display: inline;
}
Andere Lösung: