7

コンテキスト メニューを備えたページ化された PrimeFaces Datatable があり、コンテキスト メニューのメニュー項目が選択された項目の数に依存する複数選択を実装したいと考えています。一部のアクションは、1 つの項目のみが選択されている場合にのみ使用可能になるためです。 、およびその他は、1 つ以上が選択されている場合に有効になります。

私の最初のアイデアは、コントローラー Bean に設定されている個々のメニュー項目の「レンダリング」オプションを使用することでした。実際に正しいメニュー項目が表示されたので、この種の作品です。問題は、メニューアイテムのレンダリングされた機能を使用すると、データテーブルで選択が失われ、演習の目的が無効になるという効果があったことです。

    <p:dataTable id="orders" dynamic="true" var="item" rowKey="#{item.id}" value="#{ordersController.orders}"
                 emptyMessage="#{uistrings['datatable.nodata']}" paginator="true" paginatorPosition="both"
                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink}  {PageLinks}  {NextPageLink} {LastPageLink}"
                 paginatorAlwaysVisible="false" rows="10" selectionMode="multiple" selection="#{ordersController.selectedOrders}" widgetVar="orderList">

        <p:ajax event="sort" listener="#{ordersController.onSort}" update="orders"/>
        <p:ajax event="rowSelect" update="contextMenu"/>
        <p:ajax event="rowUnselect" update="contextMenu"/> 

        <p:column id="balance_date" sortBy="#{item.balanceDate}">
            <f:facet name="header">
                <h:outputText value="#{uistrings['orders.column.label.balancedate']}"/>
            </f:facet>
            <h:outputText value="#{item.balanceDate}">
                <f:converter converterId="isoDateTimeConverter"/>
                <f:attribute name="#{webUiConstBean.ISO_CONVERTER_ATTRIBUTE_TYPE}" value="#{webUiConstBean.ISO_DATE_CLASS}" />
                <f:attribute name="#{webUiConstBean.ISO_CONVERTER_ATTRIBUTE_PATTERN}" value="#{webUiConstBean.ISO_DATE_FORMAT}" />
            </h:outputText>
        </p:column>
        <p:column id="recipient_name" sortBy="#{item.recipient.displayName}">
            <f:facet name="header">
                <h:outputText value="#{uistrings['orders.column.label.recipient.displayName']}"/>
            </f:facet>
            <h:outputText value="#{item.recipient.displayName}"/>
        </p:column>

    [snip]

    </p:dataTable>

    <p:contextMenu id="contextMenu" for="orders">
        <p:menuitem value="#{uistrings['orders.menu.details']}" update="details, orders"
                    oncomplete="detailDialog.show()" icon="ui-icon-search" rendered="#{ordersController.renderDisplayDetails}" />

        <p:menuitem value="#{uistrings['orders.button.label.delete']}" icon="ui-icon-trash"
                    update="orders" ajax="true" onclick="confirmDelete.show()"
                    rendered="#{ordersController.renderDeleteDocuments}"/>
    </p:contextMenu>

このフォーラムや他のフォーラムで解決策を探し、いくつかのヒントを見つけ、自分でいくつかの代替案を見つけた後、次のようないくつかの試みを行いました。

1) 2 つの完全なコンテキスト メニューを使用する: 1 つのアイテムが選択されている場合と、多数のアイテムが選択されている場合に使用し、アイテムではなくコンテキスト メニュー自体でレンダリング オプションを使用する。

この場合、rowSelect および rowUnselect イベントは両方を更新します。

    <p:ajax event="rowSelect" update="contextMenu1Selected contextMenuManySelected"/>
    <p:ajax event="rowUnselect" update="contextMenu1Selected contextMenuManySelected"/>

コンテキストメニューは次のようになります

    <p:contextMenu id="contextMenu1Selected" for="orders" rendered="#{ordersController.render1Selected}">
        <p:menuitem value="#{uistrings['orders.menu.details']}" update="details, orders"
                    oncomplete="detailDialog.show()" icon="ui-icon-search"/>

        <p:menuitem value="#{uistrings['orders.button.label.delete']}" icon="ui-icon-trash"
                    update="orders" ajax="true" onclick="confirmDelete.show()"/>
    </p:contextMenu>

    <p:contextMenu id="contextMenuManySelected" for="orders" rendered="#{ordersController.renderManySelected}">
        <p:menuitem value="#{uistrings['orders.button.label.delete']}" icon="ui-icon-trash"
                    update="orders" ajax="true" onclick="confirmDelete.show()"/>
    </p:contextMenu>

しかし、これはまったく機能しませんでした。メニューは表示されませんでした。

2) outputPanel 内に 2 つのコンテキスト メニューを配置し、パネルを更新します。これは私の最初の試みと同じ結果でした。つまり、メニュー項目は正しくレンダリングされますが、選択が失われます

        <p:outputPanel id="contextMenuPanel" autoUpdate="true">
            <p:contextMenu id="contextMenu1Selected" for="orders" rendered="#{ordersController.renderDisplayDocument}">
                [menu items]
            </p:contextMenu>

            <p:contextMenu id="contextMenuManySelected" for="orders" rendered="#{ordersController.renderDeleteDocuments}">
        [menu items]
            </p:contextMenu>
        </p:outputPanel>

3) コントローラによって提供される menuModel を使用して contextMenu モデルを定義します。これには、2 つのケースに使用できる 2 つのモデルがあり、選択されたアイテムの数に応じて正しいモデルを提供します。出力パネルにも

        <p:outputPanel id="contextMenuPanel" autoUpdate="true">
            <p:contextMenu id="contextMenu" for="orders" model="#{ordersController.menuModel}"/>
        </p:outputPanel>>

これもうまくいきませんでした。MenuItems は正しくレンダリングされましたが、以前と同様に複数選択が失われました。

私は知っているオプションを使い果たしました。

複数選択でデータテーブルの動的コンテキストメニューを正常に実装した人はいますか?

または、誰かがうまくいくかもしれないアイデアをさらに持っていますか?

乾杯。

4

1 に答える 1

3

遅すぎるかもしれませんが、ここに私の解決策があります...

JavaScript を使用したコンテキスト メニュー:

<p:contextMenu id="searchResultTableContextMenuId" for="searchResultTableId" beforeShow="return true;"
    widgetVar="searchResultTableContextMenuVar">
    <p:menuitem value="#{msgs['label.resultlistAction.edit']}"
        disabled="#{curSelectedDocsCount ne 1}" icon="fa fa-pencil"
        oncomplete="PF('editPropertyDialogVar').show();" update=":editPropertyFormId" />
    <p:menuitem value="#{msgs['label.resultlistAction.delete']}"
        disabled="#{curSelectedDocsCount le 0}" icon="fa fa-trash"
        actionListener="#{deleteDocumentBL.initFromResultList()}"
        oncomplete="PF('deleteDocumentsDialogVar').show();" update=":deleteDocumentsFormId" />
    <p:menuitem value="#{msgs['label.resultlistAction.download']}"
        disabled="#{curSelectedDocsCount ne 1}" icon="fa fa-download" ajax="false"
        action="#{contentBL.downloadMainContent(curSearch.getViewId(), curSearch.selectedSearchResults.get(0))}" />
    <p:menuitem value="#{msgs['label.resultlistAction.clearSelectionId']}" disabled="#{curSelectedDocsCount lt 1}" icon="fa fa-times-circle-o"
        action="#{curSearch.clearSelectedSearchResults()}" update="@(.resultlistActionGrid) @(.searchResultTable)"
        oncomplete="PF('hitlistTableVar').unselectAllRows();" />
</p:contextMenu>

<!-- javascript to fix problem that the context menu hides if it is updated in ajax event contextMenu -->
<script type="text/javascript">
    var currentEvent;
    $(document).ready(function () {
        PrimeFaces.widget.ContextMenu.prototype.show = function (e) {
            // hide other contextmenus if any
            $(document.body).children('.ui-contextmenu:visible').hide();

            if (e) {
                currentEvent = e;
            }

            var win = $(window),
                    left = e.pageX,
                    top = e.pageY,
                    width = this.jq.outerWidth(),
                    height = this.jq.outerHeight();

            //collision detection for window boundaries
            if ((left + width) > (win.width()) + win.scrollLeft()) {
                left = left - width;
            }
            if ((top + height ) > (win.height() + win.scrollTop())) {
                top = top - height;
            }

            if (this.cfg.beforeShow) {
                this.cfg.beforeShow.call(this);
            }

            this.jq.css({
                'left': left,
                'top': top,
                'z-index': ++PrimeFaces.zindex
            }).show();

            e.preventDefault();
        };
    });
</script>

dataTable は、コンテキスト メニューの表示と更新のためにいくつかの ajax イベントを処理する必要があります。

<p:dataTable id="searchResultTableId" ...>
    <p:ajax event="rowSelect" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
    <p:ajax event="rowUnselect" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
    <p:ajax event="toggleSelect" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
    <p:ajax event="rowSelectCheckbox" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
    <p:ajax event="rowUnselectCheckbox" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
    <p:ajax event="contextMenu" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" oncomplete="PF('searchResultTableContextMenuVar').show(currentEvent);" />
</p:dataTable>
于 2015-09-30T12:11:22.753 に答える