如何按列嵌套在JSON中篩選/排序OpenUI5 Grid？

Question

我現在正在測試this grid的功能，目前我正在查看this example。 上週，我嘗試了一些基本的數據加載，從我正在處理的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年11月7日，或2016年7月11日，如果您願意）。這就是爲什麼在嘗試過濾後獲取空表格意味着它無法正常工作。

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（）函數在列標題中的排序按鈕的單擊事件中切換/反轉它。 OpenUI5 API doc重新排序程序指示分揀機構造函數中有更多參數用於初始排序方向和排序功能。

按照這種模式，爲您的需求來排序的owner_ID或者，你好！我想你可以建立一個分類器作爲

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