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

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

sapui5

Sapui5 如何动态绑定sap.m.Select的项目,sapui5,Sapui5,在表格中，每行都有一个下拉列表。并且每一行都有唯一的ID，并基于它在UI上填充值 ID Country 1 India/Malasia/UK 2 Paris/spain/USA 3 Canada/Chile/China 因此，我正在尝试发送ObjectID的路径。下面的代码不起作用。不知道如何实现这一点 oEditTemplate = new Select({ forceSelection: false, selectedK

在表格中，每行都有一个下拉列表。并且每一行都有唯一的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}"
    })
  }
});

您可以通过使用自定义数据和

onAfterRendering

来实现。你可以参考这个


可变项目={
“1”：[“印度”、“马来西亚”、“英国”]，
“2”：[“巴黎”、“西班牙”、“美国”]，
“3”：[“加拿大”、“智利”、“中国”]
};
sap.m.Select.extend（“CustomSelect”{
元数据：{
特性：{
countryId:“字符串”
}
},
渲染器：{}
});
var oSelect=new sap.m.Select({
客户数据：{
密钥：“countryId”，
值：“{ID}”
}
});
oSelect.addEventDelegate({
onAfterRendering:函数（oEvent）{
var src=oEvent.srcControl；
var countryId=src.data（“countryId”）；
if（！！countryId&&src.getItems（）.length==0）{
ITEMS[countryId].forEach（功能（i）{
src.addItem（新的sap.ui.core.Item({
正文：我，
价值：i
}));
});
}
}
});
var oTable=新sap.ui.table.table({
行：“{/d/results}”，
栏目：[
新的sap.ui.table.Column({
标签：新的sap.m.label（{text:“ID”}），
模板：new sap.m.Text（{Text:{ID}}），
过滤器属性：“地区”
}),
新的sap.ui.table.Column({
标签：新的sap.m.label（{text:“Country”}），
模板：oSelect
})]
});
var model=new sap.ui.model.json.JSONModel({
d:{
结果:[
{ID:“1”}，
{ID:“2”}
] 
}
});
setModel（model）；
可旋转。放置在（“内容”）；

<!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>