Trigger/activate the RowEditor from bean for a primefaces In-Cell editing enabled p:dataTable

问题

I have a primefaces p:dataTable with InCell editing enabled and want to trigger/activate the RowEditor for the newly added row.

Excerpt of XHTML

<p:commandButton id="btnAddEntry" value="Add new row" actionListener="#{myBean.addNewCar}" ... update="carTable growl" process="@this carTable ..."/>

<p:dataTable id="carTable" var="car" value="#{myBean.cars}" ... editable="true">  
        <p:column ...>  
            <p:cellEditor>
                ...
            </p:cellEditor>  
        </p:column>
    ...
        <p:column ...>  
                <p:rowEditor />  
        </p:column>
    ...         
</p:dataTable>

Here is what i have so far for the bean method:

public void addNewCar() {

    Car newCar = new Car();
    cars.add(newCar);

    FacesContext facesContext = FacesContext.getCurrentInstance();
    UIComponent uiTable = ComponentUtils.findComponent(facesContext.getViewRoot(), "carTable");
    DataTable table = (DataTable) uiTable;

    final AjaxBehavior behavior = new AjaxBehavior();    
    RowEditEvent rowEditEvent = new RowEditEvent(uiTable, behavior, table.getRowData());
    rowEditEvent.setPhaseId(PhaseId.UPDATE_MODEL_VALUES);
    table.broadcast(rowEditEvent);
}

i don't know

if this is the correct approach
in case yes, which object to pass to the constructor RowEditEvent(UIComponent component, Behavior behavior, Object object) as the 3rd parameter

回答1:

If you have only one data table in the facelet try to use this

oncomplete="jQuery('.ui-datatable-data tr').last().find('span.ui-icon-pencil').each(function(){jQuery(this).click()});

Add this to the command button. This should work.

回答2:

I used the execute(..) method of class RequestContext in my create method. This allowed me to first calculate the index of the row to go into edit mode and to include it dynamically in the javascript:

RequestContext.getCurrentInstance().execute("jQuery('span.ui-icon-pencil').eq(" + rowToEditIndex + ").each(function(){jQuery(this).click()});");

Hope this helps.

回答3:

You can add an unique styleClass to the dataTable, and one javascript function in the commandButton:

So add to the table:

styleClass="myTable"

And to the button:

oncomplete="$('.myTable tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').click()"

And your code will look like this:

<p:commandButton id="btnAddEntry" value="Add new row" actionListener="#{myBean.addNewCar}" ... update="carTable growl" process="@this carTable ..." oncomplete="$('.myTable tbody.ui-datatable-data tr:last-child td span.ui-row-editor span.ui-icon-pencil').click()"/>

<p:dataTable styleClass="myTable" id="carTable" var="car" value="#{myBean.cars}" ... editable="true">  
        <p:column ...>  
            <p:cellEditor>
                ...
            </p:cellEditor>  
        </p:column>
    ...
        <p:column ...>  
                <p:rowEditor />  
        </p:column>
    ...         
</p:dataTable>

回答4:

This solution aims to resolve a few drawbacks of the original answer of:

oncomplete="jQuery('.ui-datatable-data tr').last().find('span.ui-icon-pencil').each(function(){jQuery(this).click()});"

The above statement retrieves all "tr" elements which are descendants (at any level) of elements with the ".ui-datatable-data" class. The potential issues with that are:

As mentioned by @Gnappuraz, if there are multiple p:datatable's in the document, this statement will choose the last table.
Additionally, I ran into a problem where even with one datatable, a column with a p:selectOneRadio component will also render a html table (that contains "tr" elements). In this case the selector chooses the last "tr" for the p:selectOneRadio's table, rather than the p:datatable.
Not a problem, but the statement can be shortened to exclude the each() because of jQuery's implicit iteration.

What I ended up with was:

oncomplete="jQuery('#tableForm\\:table .ui-datatable-data > tr').last().find('span.ui-icon-pencil').click();"

This selector says - get the last "tr" element, which is a direct child of an element with class ".ui-datatable-data", which is also a descendant of the element with id "table" in form "tableForm". In other words you can now have multiple p:datatables, and any include any components that render html tables.

回答5:

Try this :

jQuery('#FormID\\:DataTableID\\:#{datatable.size()}\\:rowEditorID').find('span.ui-icon-pencil').each(function(){jQuery(this).click()});

worked well, no matter how many datatables in a same page.

回答6:

If you have several DataTable which each of them has an ID, then try to use one of these solutions:

Oncomplete="jQuery('#FrmID:TabViewI:mydataTableID'.replace(/:/g,'\\:')).find('span.ui-icon-pencil').each(function(){jQuery(this).click()});"

OR:

oncomplete="jQuery('#FrmID\\:TabViewID\\:mydataTableID').find('span.ui-icon-pencil').each(function(){jQuery(this).click()});"

This should work perfectly.

回答7:

Execute a JQuery script on complete process :

oncomplete="editNewRow()"

        <script type="text/javascript">
            $(document).on("keydown", ".ui-cell-editor-input input", function(event) {
                if (event.keyCode == 13) {
                    $(this).closest("tr").find(".td-edition .ui-row-editor .ui-row-editor-check .ui-icon-check").click();
                    return false;
                }
            });

            function editNewRow() {
                $("#pim\\:invoiceRuleCretariaTable tbody:first tr:first .td-edition .ui-row-editor .ui-icon-pencil").click();
            }
        </script>

The first function submit the addition action by press on "Enter" key

回答8:

Execute a JQuery script on complete process :

oncomplete="editNewRow()"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
            $(document).on("keydown", ".ui-cell-editor-input input", function(event) {
                if (event.keyCode == 13) {
                    $(this).closest("tr").find(".td-edition .ui-row-editor .ui-row-editor-check .ui-icon-check").click();
                    return false;
                }
            });

            function editNewRow() {
                $("#panel\\:carTable tbody:first tr:last .td-edition .ui-row-editor .ui-icon-pencil").click();
            }
        </script>

The first function submit the addition action by press on "Enter" key

回答9:

To solve this is better to use styleClass and because for fix this it is necessary to use javascript, you need to check the html tags in your browser, because it seems that they change with the versions of primefaces. For vesion 6.1 I've put this on my bean:

RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.execute("$('.styleEventosPlanPrestacion tbody.ui-datatable-data tr:first-child td div.ui-row-editor a.ui-row-editor-pencil').click()");

and In my .xhtml I've put this:

<p:dataTable ... styleClass="styleEventosPlanPrestacion">

来源：https://stackoverflow.com/questions/13821750/trigger-activate-the-roweditor-from-bean-for-a-primefaces-in-cell-editing-enable

标签

jsf-2

primefaces