9

InCell 編集が有効p:dataTableになっているプラ​​イムフェイスがあり、新しく追加された行の 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>

ビーンメソッドについてこれまでに持っているものは次のとおりです。

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)、3 番目のパラメーターとしてコンストラクターに渡すオブジェクト
4

9 に答える 9

5

create メソッドで RequestContext クラスの execute(..) メソッドを使用しました。これにより、最初に行のインデックスを計算して編集モードにし、JavaScript に動的に含めることができました。

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

お役に立てれば。

于 2013-04-16T10:53:16.453 に答える
1

一意の styleClass を dataTable に追加し、1 つの JavaScript 関数を commandButton に追加できます。

したがって、テーブルに追加します。

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>
于 2013-10-15T09:08:05.623 に答える
0

このソリューションは、次の元の回答のいくつかの欠点を解決することを目的としています。

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

上記のステートメントは、「.ui-datatable-data」クラスを持つ要素の子孫 (任意のレベル) であるすべての「tr」要素を取得します。それに関する潜在的な問題は次のとおりです。

  1. @Gnappuraz が述べたように、ドキュメントに複数の p:datatable がある場合、このステートメントは最後のテーブルを選択します。
  2. さらに、1 つのデータテーブルでも、ap:selectOneRadio コンポーネントを含む列が html テーブル (「tr」要素を含む) をレンダリングするという問題に遭遇しました。この場合、セレクターは、p:datatable ではなく、p:selectOneRadio のテーブルの最後の "tr" を選択します。
  3. 問題はありませんが、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 テーブルをレンダリングするコンポーネントを含めることができます。

于 2013-12-20T19:31:48.967 に答える
0

完全なプロセスで 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」キーを押して追加アクションを送信します

于 2019-02-08T10:23:05.723 に答える
0

これを試して ：

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

同じページにいくつのデータテーブルがあってもうまくいきました。

于 2014-01-05T03:32:43.583 に答える