时间戳

首页 > 解决方案 > 从 P13n 对话框中获取新的选定排序数据

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

问题描述

根据sap.m.sample.P13nDialog示例。模型在个性化对话框中显示正确的数据 在此处输入图像描述

但是通过单击句柄确定，我看不到当前但初始排序项目。 products.json模型：

在此处输入图像描述

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

如何获取当前选定的排序项？

仅返回初始排序列

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

第二个排序列在“sortItems”中设置较新

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

压缩示例

添加代码

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

标签： filteringsapui5

解决方案

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

SortItems 的图像

获取数组的位置：

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

你可以申请一个foreach：

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

推荐阅读