如何按嵌套在json中的列對OpenUI5 Grid進行過濾/排序？

Question

我現在正在測試此網格的功能，目前正在看這個示例 。 上周，我嘗試了一些基本的數據加載，這些數據是從我正在處理的MVC應用程序的控制器返回的。 它返回json，然后將其提供給要顯示的網格。 我要顯示的數據存儲在多個表中。 現在，為了簡化起見，我僅從其中的兩個加載數據，因為我僅測試網格的功能-它將滿足我們的需求。

到達網格（在js中）的數據看起來像這樣：

{
    Cars: [
        {
            car_Number: '123',
            car_Color: 'red',
            car_Owner: Owner: {
                owner_ID: '234',
                owner_Name: 'John'
            },
            car_DateBought: '/Date(1450648800000)/'
        },
        {
            car_Number: '456',
            car_Color: 'yellow',
            car_Owner: Owner: {
                owner_ID: '345',
                owner_Name: 'Peter'
            },
            car_DateBought: '/Date(1450648800000)/'
        },
        {
            car_Number: '789',
            car_Color: 'green',
            car_Owner: Owner: {
                owner_ID: '567',
                owner_Name: 'Michael'
            },
            car_DateBought: '/Date(1450648800000)/'
        }
    ]
}

這是到目前為止我所做的一些示例代碼：

$.ajax({
    type: 'post',
    url: BASE_HREF + 'OpenUI5/GetAllCars',
    success: function (result) {
        var dataForGrid = result['rows'];
        debugger;

        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData(dataForGrid);

        var oTable = new sap.ui.table.Table({
            selectionMode: sap.ui.table.SelectionMode.Multi,
            selectionBehavior: sap.ui.table.SelectionBehavior.Row,
            visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto,
            minAutoRowCount: 10,
            //visibleRowCount: 10,
            showNoData: false
        });

        // define the Table columns and the binding values
        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({
                text: "ID of car"
            }),
            template: new sap.ui.commons.TextView({ text: "{car_Number}" }),
            sortProperty: "car_Number", // https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/table/demokit/Table.html#__2
            filterProperty: "car_Number"
        }));

        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({ text: "Color of car" }),
            template: new sap.ui.commons.TextView({ text: "{car_Color}" }),
            sortProperty: "car_Color",
            filterProperty: "car_Color"
        }));

        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({ text: "Car Owner ID" }),
            template: new sap.ui.commons.TextView({
            // does not work like this -> text: "{Owner.owner_ID}"
                text: {
                    path: 'Owner',
                    formatter: function (owner) {
                        return owner !== null ? owner['owner_ID'] : '';
                    }
                }
            }),
            sortProperty: "Owner.owner_ID", // these two don't work
            filterProperty: "Owner.owner_ID"
        }));

        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({ text: "Car Owner Name" }),
            template: new sap.ui.commons.TextView({
            // does not work like this -> text: "{Owner.owner_Name}"
                text: {
                    path: 'Owner',
                    formatter: function (owner) {
                        return owner !== null ? owner['Name'] : '';
                    }
                }
            }),
            sortProperty: "Owner.owner_Name", // these two don't work
            filterProperty: "Owner.owner_Name"
        }));

        var dateType = new sap.ui.model.type.Date({ // http://stackoverflow.com/questions/22765286/how-to-use-a-table-column-filter-with-formatted-columns
            pattern: "dd-MM-yyyy"
        });
        oTable.addColumn(new sap.ui.table.Column({
            label: new sap.ui.commons.Label({ text: "Date bought" }),
            template: new sap.ui.commons.TextView({
                text: {
                    path: 'car_DateBought',
                    formatter: dateFormatterBG
                }
            }),
            sortProperty: "car_DateBought",
            filterProperty: "car_DateBought",
            filterType: dateType
        }));

        oTable.setModel(oModel);
        oTable.bindRows("/");
        oTable.placeAt("testTable", "only");
    },
    error: function (xhr, status, errorThrown) {
        console.log("XHR:");
        console.log(xhr);
        console.log("Status:");
        console.log(status);
        console.log("ErrorThrown:");
        console.log(errorThrown);
    }
});

我的問題：

1. 我無法按owner_ID或owner_Name排序或過濾汽車列表。 我應該如何進行過濾和排序？ 是否應該通過格式化程序功能以某種方式完成，或者...？

2. 我可以按car_DateBought進行排序，但是無法按此字段過濾汽車。 首先，我嘗試設置filterType：dateType，然后嘗試將其設置為filterType：dateFormatterBG（事實證明，dateType與我自己的dateFormatterBG所做的事情完全一樣，順便說一句）。

    function dateFormatterBG(cellvalue, options, rowObject) { var formatedDate = ''; if ((cellvalue != undefined)) { var date = new Date(parseInt(cellvalue.substr(6))); var month = '' + (date.getMonth() + 1); var day = '' + date.getDate(); var year = date.getFullYear(); if (month.length < 2) { month = '0' + month; } if (day.length < 2) { day = '0' + day; } formatedDate = [day, month, year].join('-'); } return formatedDate; } 

無論如何，就像我說的，我都嘗試了兩次，但是都行不通。 當我單擊第一個鏈接中的示例中的列標題時，沒有任何日期選擇器。 我如何告訴OpenUI5，當他/她單擊下拉菜單底部的“過濾器”輸入字段時，該列需要按日期過濾，並且應該為用戶提供日期選擇器？ 當我嘗試在“ 07-11-2016”（格式設置）之類的過濾器字段中寫入日期時，我得到了一個空表/網格。 如果我嘗試在json對象中從字段car_DateBought輸入巨大的數字，則表中所有可用的行均保持不變，並且當我重新單擊標題時，下拉菜單底部的過濾器字段會顯示錯誤狀態。

預先感謝您的幫助和建議！

編輯：這只是樣本虛擬數據。 我嘗試加載實際數據，然后看到表中有幾行帶有日期的日期，即今天（2016年7月11日，或者您願意的話，2016年11月7日）。 這就是為什么在嘗試過濾后得到一個空表意味着它不能正常工作的原因。

Answer 1

排序：在一個示例中，我正在查看以下內容出現在控制器中：

    onInit : function () {
        this._IDSorter = new sap.ui.model.Sorter("my_id", false);
    },
    ....

然后，在視圖中，標題列中定義了一個按鈕，如下所示：

        <Column>
            <Label text="Project"/>
            <Button icon="sap-icon://sort" press="onSortID" />
        </Column>

在控制器中，還有另一個功能：

    onSortID:  function(){
      this._IDSorter.bDescending = !this._IDSorter.bDescending;
      this.byId("table").getBinding("items").sort(this._IDSorter);
    },

我在將其定義為onInit（）時集體閱讀，然后通過onSortId（）函數在列標題中排序按鈕的click事件中切換/反轉它。 OpenUI5 API文檔重新排序器指示排序器構造函數中還有更多參數可用於初始排序方向和排序功能。

按照這種模式，為了滿足您對owner_ID或owner_Name進行排序的需要，我假設您可以將排序器設置為

this._OwnerIDSorter = new sap.ui.model.Sorter("car_Owner/owner_ID", false);
this._OwnerNameSorter = new sap.ui.model.Sorter("car_Owner/owner_Name", false);