触发/激活从豆的RowEditor用于primefaces单元格编辑启用号码：dataTable中

Question

我有一个primefaces p:dataTable与InCell editing enabled和想要触发/激活新添加的行的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);
}

我不知道

1. 如果这是正确的做法
2. 万一是，哪个对象传递给构造RowEditEvent(UIComponent component, Behavior behavior, Object object)作为第三参数

Answer 1

如果你在facelet里只有一个数据表中尝试使用这个

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

此添加到命令按钮。这应该工作。

Answer 2

我用我的方法创建类的RequestContext的execute（..）方法。这让我首先计算该行的索引进入编辑模式，并动态地将其包含在JavaScript的：

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

希望这可以帮助。

Answer 3

您可以添加一个独特的styleClass到DataTable，一个在命令按钮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>

Answer 4

该解决方案旨在解决原有答案的一些缺点：

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

上述语句检索所有与“的.ui-数据表数据”类元素的“TR”元件，其后代（在任何级别）。与潜在的问题是：

1. 正如@Gnappuraz提到，如果有多个号码：DataTable的文件中，该语句将选择最后一个表。
2. 此外，我遇到了一个问题，即，即使一个数据表，用P A柱：selectOneRadio组件也将呈现一个HTML表（包含“TR”元素）。在这种情况下，选择选择用于p最后的“TR”：selectOneRadio的表，而不是号码：数据表。
3. 这不是个问题，但声明可以缩短排除每（）因为jQuery的implicit iteration的。

我结束了是：

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

这个选择说 - 获得最后的“TR”元素，这与类元素“的.ui-数据表中数据”，这也与id为‘表’的元素的形式‘tableForm’后裔的直接孩子。换句话说，你现在可以有多个号码：DataTable和任何包括渲染HTML表格的任何组件。

Answer 5

尝试这个 ：

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

在同一页面效果很好，无论有多少数据表。

Answer 6

如果你有多个数据表，每个人都有一个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()});"

这应该很好地工作。

Answer 7

在执行过程中完成一个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”键提交加入行动

Answer 8

在执行过程中完成一个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”键提交加入行动

Answer 9

为了解决这个问题，最好使用的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">