Получить новые выбранные данные сортировки из диалогового окна p13n

По примеру sap.m.sample.P13nDialog. Модель показывает правильные данные в диалоговом окне персонализации. enter image description here

Но нажав на ручку ОК, я не вижу тока, но начальная сортировка элементов. products.json модель:

enter image description here

this.oPersonalizationDialog.getPanels()[1].getSortItems()

Как я могу получить текущие выбранные элементы сортировки?

возвращается только исходный столбец сортировки

console.log(oSortPanel.getAggregation("sortItems")[0]); // ok

второй столбец сортировки более новый, установлен в "sortItems"

console.log(oSortPanel.getAggregation("sortItems")[1]); // undefined :/

zip Пример

добавлен код

Page.controller.js

    oPersonalizationDialog: null,
    bShowResetEnabled: false,
    bIsReseted: false,

    handleOK: function(oEvent) {
        //this._storeShowResetEnabled();
        var oSortPanel = oEvent.getSource().getAggregation("panels")[1];
        console.log(oSortPanel);
        var oSortItems = oSortPanel.getAggregation("sortItems")[0];
        console.log(oSortItems);
        var oItemsObject = {
            "ColumnKey": oSortItems.getColumnKey(),
            "Operation": oSortItems.getOperation()
        };
        console.log(oItemsObject);
        console.log(oSortPanel.getAggregation("sortItems")[1]); // undefined

        this.oPersonalizationDialog.close();
    },

    handleCancel: function(oEvent) {
        this.oPersonalizationDialog.close();
    },

    handleReset: function(oEvent) {
        this.bIsReseted = true;
        MessageToast.show("Reset button has been clicked", {
            width: "auto"
        });
    },

    onPersonalizationDialogPress: function(oEvent) {
        var oPersonalizationDialog = this._getDialog();

        oPersonalizationDialog.setShowResetEnabled(this.bShowResetEnabled);
        this.bIsReseted = false;

        oPersonalizationDialog.open();
    },

    onAddColumnsItem: function(oEvent) {
        MessageToast.show("Event 'addColumnsItem' fired in order to move the selected column item", {
            width: "auto"
        });
    },

    onChangeColumnsItem: function(oEvent) {
        MessageToast.show("Event 'changeColumnsItem' fired in order to move the selected column item", {
            width: "auto"
        });
    },

    _storeShowResetEnabled: function() {
        if (this.bIsReseted) {
            this.bShowResetEnabled = false;
        } else {
            this.bShowResetEnabled = this.oPersonalizationDialog.getShowResetEnabled();
        }
    },

    _getDialog: function() {
        if (this.oPersonalizationDialog) {
            return this.oPersonalizationDialog;
        }
        this.oPersonalizationDialog = sap.ui.xmlfragment("sap.m.sample.P13nDialog.PersonalizationDialog", this);

        this.getView().setModel(new JSONModel("products.json"));
        this.getView().setModel(new ResourceModel({
            bundleName: "sap.m.sample.P13nDialog.i18n.i18n"
        }), "i18n");

        this.getView().addDependent(this.oPersonalizationDialog);
        return this.oPersonalizationDialog;
    }

Посмотреть

<mvc:View height="100%" controllerName="sap.m.sample.P13nDialog.Page"
xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<l:VerticalLayout
    class="sapUiContentPadding"
    width="100%">
    <l:content>
        <Button
            text="Show Personalization Dialog"
            press="onPersonalizationDialogPress" />
    </l:content>
</l:VerticalLayout>

PersonalizationDialog.fragment.xml.fragment (Диалог)

<core:FragmentDefinition xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<P13nDialog ok="handleOK" cancel="handleCancel" showReset="true"
    reset="handleReset" initialVisiblePanelType="sort">
    <panels>
        <P13nColumnsPanel visible="true" addColumnsItem="onAddColumnsItem"
            changeColumnsItems="onChangeColumnsItem" type="columns"
            items="{
                path: '/ColumnCollection'
            }">
            <items>
                <!-- P13nItem columnKey="name" text="{i18n>ColumnName}" visible="true" 
                    / -->
                <P13nItem columnKey="{path}" text="{text}" visible="{visible}" />
            </items>
        </P13nColumnsPanel>
        <P13nSortPanel visible="false" type="sort"
            containerQuery="true"
            items="{
                path: '/ColumnCollection'
            }"
            sortItems="{
                path: '/SortItems'
            }">
            <P13nItem columnKey="{path}" text="{text}" />
            <sortItems>
                <P13nSortItem columnKey="{columnKeyModel}" operation="{operationModel}" />
            </sortItems>
        </P13nSortPanel>
        <P13nFilterPanel visible="true" type="filter"
            containerQuery="true"
            items="{
                path: '/ColumnCollection'
            }"
            filterItems="{
                path: '/FilterItems'
            }">
            <P13nItem columnKey="{path}" text="{text}" />
            <filterItems>
                <P13nFilterItem columnKey="{columnKeyModel}"
                    operation="{operationModel}" value1="{value1Model}" />
            </filterItems>
        </P13nFilterPanel>
    </panels>
</P13nDialog>

Products.json (Модель)

{
"ColumnCollection":[
    {"text" : "ProductId", "path" : "productId", "visible" : true},
    {"text" : "Name", "path" : "name", "visible" : true},
    {"text" : "Category", "path" : "category"},
    {"text" : "SupplierName", "path" : "supplierName"},
    {"text" : "Description", "path" : "description"},
    {"text" : "WeightMeasure", "path" : "weightMeasure"},
    {"text" : "WeightUnit", "path" : "weightUnit"},
    {"text" : "Price", "path" : "price"},
    {"text" : "CurrencyCode", "path" : "currencyCode"},
    {"text" : "Status", "path" : "status"},
    {"text" : "Quantity", "path" : "quantity"},
    {"text" : "UoM", "path" : "uom"},
    {"text" : "Width", "path" : "width"},
    {"text" : "Depth", "path" : "depth"},
    {"text" : "Height", "path" : "height"},
    {"text" : "DimUnit", "path" : "dimUnit"},
    {"text" : "ProductPicUrl", "path" : "productPicUrl"}
],
"SortItems":[
    {"columnKeyModel" : "name", "operationModel" : "Descending"}
],
"FilterItems":[
    {"columnKeyModel" : "name", "operationModel" : "Contains", "value1Model" : "a"}
]}

Не могли бы вы поделиться своим кодом? Я создал один, и функция ОК отлично возвращает выбранные элементы сортировки. Не могли бы вы немного лучше объяснить, чего вы хотите достичь и что сейчас происходит?

Matthijs Mennens 10.09.2018 14:45

Вы в этом разобрались? У меня такая же проблема, когда модель не обновляется с изменениями, сделанными на экране. Вызов getSorItems все время возвращает мне начальные значения.

NewGuyInJava 16.09.2019 21:09
0
2
1 025
3

Ответы 3

Привет, вы можете использовать функцию ОК, чтобы получить то, что хотите, ниже приведен образец, и вы можете его улучшить

handleClose : function(oEvent) {
          var oSortPanel = oEvent.getSource().getAggregation("panels")[1];
          var oSortItems = oSortPanel.getAggregation("sortItems")[0];
          var oItemsObject = {"ColumnKey":oSortItems.getColumnKey(),"Operation":oSortItems.getOperation()};
          alert(JSON.stringify(oItemsObject));
            this.oPersonalizationDialog.close();

        },

этот код проверяет все выбранные элементы сортировки в диалоговом окне p13n. Проверьте мой пример кода ниже:

handleSortPanel: function (oEvent, table) {
        var self = this;
        var oSource = oEvent.getSource();
        var aSorters = [];
        var index = 0;
        oSource.getPanels()[2].getSortItems().forEach(function (sortItem) {
            if (sortItem.getOperation() === "Descending") {
                aSorters.push(new window.sap.ui.model.Sorter(sortItem.getColumnKey(), true));
            }
            if (sortItem.getOperation() === "Ascending") {
                aSorters.push(new window.sap.ui.model.Sorter(sortItem.getColumnKey(), false));
            }
            index += 1;
        });
        if (aSorters.length > 0) {
            self.getView().byId(table).getBinding("items").sort(aSorters);
            aSorters = [];
        }
    }

Этот код возвращает массив с выбранными sortItems.

self.getView().byId(table).getBinding("items").sort(aSorters);

Вы можете связать эту функцию с кнопкой OK диалогового окна p13n и применить фильтр к вашей таблице. Что-то вроде:

onOK: function (oEvent) {
        var oView = this.getView();
        var table = "tableId";

        this.handleSortPanel(oEvent, table);

        oEvent.getSource().close();
        oView.destroyDependents();
    },

Обновлено: я узнал, как получить текущие выбранные элементы сортировки. Подход отличается от моего, но, к сожалению, я не знаю почему.

oEvent.getSource().getAggregation("panels")[1].getSortItems()

Изображение SortItems

Получить позицию массива:

oEvent.getSource().getAggregation("panels")[1].getSortItems()[0]

Вы можете применить foreach:

oEvent.getSource().getAggregation("panels")[1].getSortItems().forEach(function (sortItem) { console.log(sortItem.getColumnKey()) });

я что-то пропустил? Я использую PersonalizationDialog.fragment.xml.fragment и this.getView (). AddDependent (this.oPersonalizationDialog); и используйте модель для элементов sortItems и P13nItem, P13nSortItem панели сортировки.

Medera 11.09.2018 12:36

@Medera Я просмотрел ваш код и узнал, как получить выбранные вами элементы сортировки: oEvent.getSource (). GetAggregation ("панели") [1] .getSortItems (‌). Если вы хотите получить конкретный элемент, вы можете выполнить foreach в этом списке элементов сортировки. Для доступа к columnKey: oEvent.getSource (). GetAggregation («панели») [1] .getSortItems (‌) [1] .getColumnKey () или операция: oEvent.getSource (). GetAggregation («панели») [1 ] .getSortItems (‌) [1] .getOperation () (Примечание: я обновлю свой пост этой информацией)

juan_marti 11.09.2018 16:25

спасибо за ваши идеи. Но моя проблема в том, что у меня всегда есть только 1 элемент на панели сортировки, даже если я изменяю его в пользовательском интерфейсе. oEvent.getSource (). getAggregation ("панели") [1] .getSortItems (‌) // (всегда дает мне только 1 элемент)

Medera 11.09.2018 17:02

@Medera Я попробовал еще раз и получил 2 элемента с этой строкой кода. Я обновлю свой пост изображением.

juan_marti 11.09.2018 17:11

хорошо, я случайно загрузил версию, в которой добавлено 2 элемента внутри products.json i testet 2 item, в этом примере вы не можете добавить третий элемент внутри пользовательского интерфейса: "SortItems": [{"columnKeyModel": "name", "operationModel": "По убыванию"}, {"columnKeyModel": "productPicUrl", "operationModel": "По убыванию"}],

Medera 11.09.2018 17:34

Немного поздно, но, возможно, это поможет кому-то другому.

Я обнаружил, что можно сортировать, фильтровать и группировать элементы в событии P13n OK.

Это утверждение:

oEvent.getSource().getAggregation("panels")[index of your sort panel].getSortItems();

Что мне нужно было сделать, так это обработать события добавления и удаления для элементов сортировки, фильтрации, группировки и обновления.

Пример сортировки событий:

    taskAddSort: function(oEvent){
        oEvent.getSource().addSortItem(oEvent.getParameter("sortItemData"));
    },
    taskRemoveSort: function(oEvent){
        oEvent.getSource().removeSortItem(oEvent.getParameter("index"));
    },

И определение диалога P13N:

    <P13nSortPanel  type="sort"
                    containerQuery="true"
                    addSortItem=".personalization.taskAddSort"
                    removeSortItem=".personalization.taskRemoveSort"
                    sortItems="{path: '/p13nSort'}" 
                    items="{path: '/p13nItem'}">
                    <P13nItem columnKey="{columnKey}" text="{text}"/>
                    <sortItems>
                        <P13nSortItem columnKey="{columnKey}" operation="{operation}"/>
                    </sortItems>
    </P13nSortPanel>

Другие вопросы по теме