Question

在表中，每一行都有一个下拉列表。而且每一行都有唯一的ID，并应基于该ID在UI中填充

ID      Country  
 1      India/Malasia/UK  
 2      Paris/spain/USA  
 3      Canada/Chile/China

因此，我正在尝试发送ObjectID的路径。
以下代码不起作用。不知道如何实现这一目标。

oEditTemplate = new Select({
  forceSelection: false,
  selectedKey: sPath,
  items: {
    path:  {
      path: "tempModel>ObjectId",
      formatter: this._editableFormatter.bind(this, sName)
    },
    templateShareable: false,
    template: new ListItem({
      key: "{tempModel>value}",
      text: "{tempModel>value}"
    })
  }
});

Answer 1

您可以使用自定义数据和onAfterRendering来实现。您可以参考此JSBIN example

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.ui.table,sap.m" 
            data-sap-ui-xx-bindingSyntax="complex"
            data-sap-ui-theme="sap_bluecrystal"></script>
    <script>
      var ITEMS = {
        "1": ["India", "Malasia", "UK"],
        "2": ["Paris", "Spain", "USA"],
        "3": ["Canada", "Chile", "China"]
      };

      sap.m.Select.extend("CustomSelect", {
        metadata: {
          properties: {
            countryId: "string"
          }
        },
        renderer: {}
      });

      var oSelect = new sap.m.Select({
        customData: {
          key: "countryId",
          value: "{ID}"
        }
      });
      oSelect.addEventDelegate({
        onAfterRendering: function(oEvent) {
          var src = oEvent.srcControl;
          var countryId = src.data("countryId");

          if (!!countryId && src.getItems().length === 0) {
            ITEMS[countryId].forEach(function(i) {
               src.addItem(new sap.ui.core.Item({
                 text: i,
                 value: i
               }));
            });
          }
        }
      });

      var oTable = new sap.ui.table.Table({
        rows: '{/d/results}',
        columns: [
          new sap.ui.table.Column({
            label: new sap.m.Label({text: "ID"}),
            template: new sap.m.Text({text:"{ID}"}),
            filterProperty: 'District'
          }),
          new sap.ui.table.Column({
            label: new sap.m.Label({text: "Country"}),
            template: oSelect
          })]
      });


      var model = new sap.ui.model.json.JSONModel({
        d: {
          results: [
            { ID: "1"},
            { ID: "2"}
          ] 
        }
      });

      oTable.setModel(model);
      oTable.placeAt('content');
    </script>
  </head>
  <body id="content" class="sapUiBody sapUiSizeCompact">
  </body>
</html>

如何动态绑定sap.m.Select项目

1 个答案: