如何在 sapui5 MultiComboBox 中设置选定项目? [英] How can I set Selected items in a sapui5 MultiComboBox?

问题描述

我有以下 json 数据:

I have the following json data:

{  
   "medios":[  
      {  
         "Medio":"Cheque",
         "Key":"5"
      },
      {  
         "Medio":"Transferencia Bancaria",
         "Key":"6"
      }
   ]
}

我使用 json 模型绑定这些数据:

And I bind this data using a json model:

var oModelTest = new sap.ui.model.json.JSONModel();
var MediosPagoPromesa = [];
var MedioObj = {  
Medio: proMedioPagoCP, //a variable I fill inside a loop
Key: i.toString() //because it is inside a loop
}

MediosPagoPromesa.push(MedioObj);

 oModelTest.setData({
 'medios': MediosPagoPromesa
 });
sap.ui.getCore().setModel(oModelTest, "Pagos"); 

进入 MultiComboBox:

into a MultiComboBox:

 var test = sap.ui.getCore().getModel("Pagos"); 

 var oMultiSelect = new sap.m.MultiComboBox({
      items: {
      path: "/medios",
      template: new sap.ui.core.ListItem({
      key: '{Key}',
      text: '{Medio}'
  }),
      templateShareable: true
      },
      selectedKeys: ?,      //here is my problem             
});
oMultiSelect.setModel(test);

我不知道的是，如何将我在 MultiComboBox 中绑定的所有项目设置为选定项目，因此即使从第一次开始它们也可以自动显示为选定项目，任何想法我该如何实现这?

What I don't know, is how can I set as selected Items, all the items I am binding in the MultiComboBox, So they can be automatically displayed as selected even from the first time, any idea idea how can I achieve this?

推荐答案

在循环中添加一个新的被选元素数组

add a new array of the selected element filed in the the loop

var oModelTest = new sap.ui.model.json.JSONModel();
var MediosPagoPromesa = [];
var selected = [];
var MedioObj = {  
Medio: proMedioPagoCP, //I variable I fill inside a loop
Key: i.toString() //because it is inside a loop
}
selected.push(i.toString); //inside the loop

MediosPagoPromesa.push(MedioObj);

 oModelTest.setData({
 'medios': MediosPagoPromesa,
 'selected' : selected 
 });
sap.ui.getCore().setModel(oModelTest, "Pagos");

在 MultiComBox 中使用 bindProperty 绑定 selectedKeys 属性

In MultiComBox use bindProperty to bind the selectedKeys property

var test = sap.ui.getCore().getModel("Pagos"); 

 var oMultiSelect = new sap.m.MultiComboBox({
      items: {
      path: "/medios",
      template: new sap.ui.core.ListItem({
      key: '{Key}',
      text: '{Medio}'
  }),
      templateShareable: true
      },

});
oMultiSelect.bindProperty("selectedKeys", "/selected");
oMultiSelect.setModel(test);

这是带有明确示例的 jsbin:https://jsbin.com/murural/1/edit?html,js,output

Here is jsbin with clear example : https://jsbin.com/murural/1/edit?html,js,output

这篇关于如何在 sapui5 MultiComboBox 中设置选定项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！