jsf-2 - 从 bean 触发/激活 RowEditor 以启用 primefaces 内嵌编辑 p:dataTable

Question

我有一个启用p:dataTable了InCell 编辑的 primefaces，并且想要为新添加的行触发/激活 RowEditor。

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>

这是我到目前为止的bean 方法：

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);
}

我不知道

如果这是正确的方法
RowEditEvent(UIComponent component, Behavior behavior, Object object)如果是，将哪个对象作为第三个参数传递给构造函数

score 11 · Accepted Answer

如果 facelet 中只有一个数据表，请尝试使用此

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

将此添加到命令按钮。这应该有效。

score 5 · Accepted Answer

我在 create 方法中使用了 RequestContext 类的 execute(..) 方法。这允许我首先计算行的索引以进入编辑模式并将其动态包含在 javascript 中：

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

希望这可以帮助。

score 1 · Accepted Answer

您可以在 dataTable 中添加一个唯一的 styleClass，并在 commandButton 中添加一个 javascript 函数：

所以添加到表中：

styleClass="myTable"

到按钮：

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

您的代码将如下所示：

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

score 0 · Accepted Answer

该解决方案旨在解决以下原始答案的一些缺点：

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

上面的语句检索所有“tr”元素，它们是“.ui-datatable-data”类元素的后代（在任何级别）。潜在的问题是：

正如@Gnappuraz 所说，如果文档中有多个 p:datatable，则此语句将选择最后一个表。
此外，我遇到了一个问题，即使使用一个数据表，带有 ap:selectOneRadio 组件的列也会呈现一个 html 表（包含“tr”元素）。在这种情况下，选择器选择 p:selectOneRadio 的表的最后一个“tr”，而不是 p:datatable。
没问题，但是由于 jQuery 的隐式迭代，可以缩短语句以排除 each() 。

我最终得到的是：

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

这个选择器说 - 获取最后一个“tr”元素，它是类“.ui-datatable-data”的元素的直接子元素，它也是表单“tableForm”中id为“table”的元素的后代。换句话说，您现在可以拥有多个 p:datatables，并且任何包含呈现 html 表的任何组件。

score 0 · Accepted Answer

试试这个：

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

运行良好，无论同一页面中有多少数据表。

score 0 · Accepted Answer

如果您有多个 DataTable，每个都有一个 ID，请尝试使用以下解决方案之一：

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

或者：

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

这应该可以完美地工作。

score 0 · Accepted Answer

在完整的过程中执行一个 JQuery 脚本：

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>

第一个函数通过按“Enter”键提交添加操作

score 0 · Accepted Answer

在完整的过程中执行一个 JQuery 脚本：

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>

第一个函数通过按“Enter”键提交添加操作

score -1 · Accepted Answer

要解决这个问题最好使用 styleClass，因为要解决这个问题，必须使用 javascript，您需要检查浏览器中的 html 标签，因为它们似乎会随着 primefaces 的版本而变化。对于 vesion 6.1，我把它放在我的 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()");

在我的 .xhtml 中我放了这个：

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

jsf-2 - 从 bean 触发/激活 RowEditor 以启用 primefaces 内嵌编辑 p:dataTable

9 回答 9

Related

Reference