Question

我有一个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);
}

我不知道

如果这是正确的方法
如果是，则将哪个对象作为第3个参数传递给构造函数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

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

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

希望这有帮助。

Answer 3

您可以向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>

Answer 4

此解决方案旨在解决原始答案的一些缺点：

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

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

如@Gnappuraz所述，如果文档中有多个p：datatable，则此语句将选择最后一个表。
此外，我遇到了一个问题，即使有一个数据表，一个带有p：selectOneRadio组件的列也将呈现一个html表（包含“tr”元素）。在这种情况下，选择器为p：selectOneRadio的表选择最后一个“tr”，而不是p：datatable。
不是问题，但由于jQuery的implicit iteration，可以缩短语句以排除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表的组件。

Answer 5

试试这个：

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

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

Answer 6

如果你有几个DataTable，每个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()});"

这应该完美无缺。

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脚本：

export const UploadsRoutes: Route[] = [
  {
    path: UrlPaths.uploads,
    component: UploadsComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        component: UploadsListComponent
      },
      {
        path: 'new',
        component: FileUploadComponent
      }
    ]
  }
];

oncomplete="editNewRow()"

第一个功能通过按“ 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">

从bean触发/激活RowEditor以进行主要的In-Cell编辑启用p：dataTable

9 个答案: