Sap UI5动态绑定在表上取决于引用字段

Question

List items with toolbar

嗨专家，我正在尝试提出一个批准应用程序，但不是在一个主要细节的方法。如上所示，我希望它是一个带有2个选项卡的表格格式; 1个选项卡用于批准列表，另一个选项卡用于批准的项目。

例如，我有以下json数据，是否可以根据“status”过滤模型，并将过滤后的结果动态绑定到1个表，但会根据点击的选项卡显示结果：对于Approval选项卡和Approved选项卡：

"QNPResult": [
        {
            "QNPNo": "QNP01",
            "MatDesc": "BROWN SUGAR",
            "PY": "38.46",
            "ACT": "35.17",
            "BP": "38.7",
            "OpenPOBal": "33.44",
            "CurrentPrice": "KG",
            "InvStock": "29.04",
            "InvMonth": "Feb 2018",
            "RecoVol": "700,000",
            "BookUntil": "Book until March 2018",
            "PriceOutlook": "Decreasing due to enough supply driven by crop season",
            "Status": "1"
        },
        {
            "QNPNo": "QNP02",
            "MatDesc": "WHITE SUGAR",
            "PY": "39.46",
            "ACT": "41.17",
            "BP": "48.7",
            "OpenPOBal": "43.44",
            "CurrentPrice": "KG",
            "InvStock": "49.04",
            "InvMonth": "March 2018",
            "RecoVol": "800,000",
            "BookUntil": "Book until March 2019",
            "PriceOutlook": "Decreasing due to enough supply driven by crop season",
            "Status": "1"
        },
        {
            "QNPNo": "QNP03",
            "MatDesc": "SUGAR",
            "PY": "69.46",
            "ACT": "71.17",
            "BP": "88.7",
            "OpenPOBal": "93.44",
            "CurrentPrice": "KG",
            "InvStock": "19.04",
            "InvMonth": "March 2019",
            "RecoVol": "100,000",
            "BookUntil": "Book until March 2020",
            "PriceOutlook": "Decreasing due to enough supply driven by crop season",
            "Status": "2"
        }
    ],

如果有更好的方法来实现我想要的设计，请告诉我。提前致谢！

Answer 1

基于您链接的图像以及您描述的行为，我建议您使用SAPUI5 SDK中的此方法 - 演示工具包：Icon Tab Bar - Filter 看看Controller，handleIconTabBarSelect方法可以解决这个问题：基于选中的选项卡，它使用不同的oBinding.filter(aFilters);实例过滤表格的绑定sap/ui/model/Filter。

Answer 2

var status1 = [];
var status2 = [];
for(var i = 0; i<QNPResult.length; i++){
   if(QNPResult[i].Status === "1"){
      status1.push(QNPResult[i]);
   }else{
      status2.push(QNPResult[i])
   } 
}

将这些数组设置为从属表模型。

Answer 3

有很多方法可以做到这一点。这是一个http://jsbin.com/yavuhay/edit?js,output

sap.ui.jsview("myView.Template", {
  getControllerName: function() {
    return "myView.Template";
  },
  createContent: function(oController) {
    function createList(filter) {
      return new sap.m.List({
        columns: [
          new sap.m.Column({
            header:new sap.m.Text({
              text:"QNPNo"
            })
          }),
          new sap.m.Column({
            header:new sap.m.Text({
              text:"Status"
            })
          })
        ],
        items: {
          path: '/QNPResult',
          template: new sap.m.ColumnListItem({
            cells: [
              new sap.m.Text({
                text: '{QNPNo}'
              }),
              new sap.m.Text({
                text: '{Status}'
              })
            ]
          }),
          filters: [new sap.ui.model.Filter("Status", sap.ui.model.FilterOperator.EQ, filter)]
        }
      })
    }
    return new sap.m.VBox({
      items: [
        sap.m.IconTabBar({
          items:[
            new sap.m.IconTabFilter({
              icon: "sap-icon://approvals",
              content: [ 
                new createList("1")
              ]
            }),
            new sap.m.IconTabFilter("Step3", {
              icon: "sap-icon://accept",
              content: [
                new createList("2")
              ]
            })
          ]
        })
      ]
    });
  }
});

sap.ui.define([
  'jquery.sap.global',
  'sap/ui/core/mvc/Controller',
  'sap/ui/model/Filter',
  'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, Filter, JSONModel) {
  "use strict";

  return Controller.extend("myView.Template", {
    onInit: function(oEvent) {
      this.getView().setModel(new JSONModel({
        "QNPResult": [
          {
            "QNPNo": "QNP01",
            "MatDesc": "BROWN SUGAR",
            "PY": "38.46",
            "ACT": "35.17",
            "BP": "38.7",
            "OpenPOBal": "33.44",
            "CurrentPrice": "KG",
            "InvStock": "29.04",
            "InvMonth": "Feb 2018",
            "RecoVol": "700,000",
            "BookUntil": "Book until March 2018",
            "PriceOutlook": "Decreasing due to enough supply driven by crop season",
            "Status": "1"
          },
          {
            "QNPNo": "QNP02",
            "MatDesc": "WHITE SUGAR",
            "PY": "39.46",
            "ACT": "41.17",
            "BP": "48.7",
            "OpenPOBal": "43.44",
            "CurrentPrice": "KG",
            "InvStock": "49.04",
            "InvMonth": "March 2018",
            "RecoVol": "800,000",
            "BookUntil": "Book until March 2019",
            "PriceOutlook": "Decreasing due to enough supply driven by crop season",
            "Status": "1"
          },
          {
            "QNPNo": "QNP03",
            "MatDesc": "SUGAR",
            "PY": "69.46",
            "ACT": "71.17",
            "BP": "88.7",
            "OpenPOBal": "93.44",
            "CurrentPrice": "KG",
            "InvStock": "19.04",
            "InvMonth": "March 2019",
            "RecoVol": "100,000",
            "BookUntil": "Book until March 2020",
            "PriceOutlook": "Decreasing due to enough supply driven by crop season",
            "Status": "2"
          }
        ]
      }))
    }
  });
});


var view = sap.ui.view({
  type: sap.ui.core.mvc.ViewType.JS,
  viewName: "myView.Template"
});
view.placeAt("content");