从P13n对话框​​中获取新的选定排序数据

时间：2018-09-10 08:15:40

标签： filtering sapui5

按照sap.m.sample.P13nDialog示例。模型在个性化对话框中显示正确的数据 enter image description here

但是通过单击确定OK，我看不到当前，但看到了初始排序项。 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 Example

添加了代码

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"}
]}

3 个答案:

答案 0 :(得分：1)

此代码检查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);

您可以将此功能与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()

Image of SortItems

获取数组的位置：

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

您可以申请foreach：

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

答案 1 :(得分：0)

嗨，您可以使用okay函数来获得所需的东西，下面是示例，您可以对其进行增强

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();

        },

答案 2 :(得分：0)

有点晚了，但也许会帮助别人。

我发现可以在 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>
相关问题
最新问题