如何根据sapui5中的第一个输入填充第二个下拉列表

时间:2015-03-17 18:41:03

标签: sapui5

我的代码是

var oItemsData = {
              items: [
                { text: "abc", text1: "opq"},
                { text: "abc", text1: "nhm"},
                { text: "def", text1: "rst" },
                { text: "ghe", text1: "uvw" },
                { text: "ijk", text1: "xyz" },
                { text: "def", text1: "uhg" },
                { text: "lmn", text1: "abc" }
              ]
            };
var oItemsModel = new sap.ui.model.json.JSONModel(oItemsData);
sap.ui.getCore().setModel(oItemsModel, "items");
new sap.ui.commons.Label({text:"FirstOne"}),
                    new sap.ui.commons.DropdownBox({value:"",required: true,
                        items: { 
                            path: "items>/items",
                            template: new sap.ui.core.ListItem({
                              text: { path: "items>text" }//how to filter
                            }) 
                          }
                    }),
                    new sap.ui.commons.Label({text:"SecondOne"}),
                    new sap.ui.commons.DropdownBox({value:"",required: true,
                        items: { 
                            //populate on the basis of 1st one's input
                            }) 
                          }
                    })

我有两个问题。 1.如何过滤掉第一个下拉列表中的多个条目? 2.如何在第一次输入的基础上填充第二个列表?

1 个答案:

答案 0 :(得分:3)

您有两个下拉列表,第二个中的值取决于第一个。数据有点不整齐,并为您提供第一个列表的重复数据删除问题和第二个列表的匹配问题。

您可以考虑通过清理数据来完全避免这些问题,以便更好地满足您的目的吗?

这是一个例子(在Android平板电脑上的火车上,所以我暂时无法对其进行全面测试)

第1步:根据需要重复删除并进行组织:

var organised = oItemsData.items.reduce(function(m, i) {
  var l = m[i.text] || [];
  l.push(i.text1);
  m[i.text] = l;
  return m;
}, {});

这应该是这样的:

{ abc: [ 'opq', 'nhm' ],
  def: [ 'rst', 'uhg' ],
  ghe: [ 'uvw' ],
  ijk: [ 'xyz' ],
  lmn: [ 'abc' ] }

步骤2:创建更适合手头任务的数据结构,并将其用于模型中设置的数据中:

oItemsData.items = Object.keys(organised).map(function(key) {
  return {
    text: key,
    text1: organised[key]
  };
})

oItemsData.items创建的结构将如下所示:

[ { text: 'abc',
    text1: [ 'opq', 'nhm' ] },
  { text: 'def',
    text1: [ 'rst', 'uhg' ] },
  { text: 'ghe', text1: [ 'uvw' ] },
  { text: 'ijk', text1: [ 'xyz' ] },
  { text: 'lmn', text1: [ 'abc' ] } ]