【问题标题】:OpenUI5: Binding sap.m.ComboBox to a JSONModel() column in sap.ui.table.TableOpenUI5:将 sap.m.ComboBox 绑定到 sap.ui.table.Table 中的 JSONModel() 列
【发布时间】:2017-02-13 15:58:52
【问题描述】:

我已经熟悉 OpenUI5 好几个星期了,而且我一直面临新的问题,比如我现在提出的问题。像往常一样,我正确地完成了我的作业——寻找解决方案、文档、类似的线程等。

我想要实现的目标:我想在sap.ui.table.Table 的一列中显示sap.m.ComboBox,并将其绑定到当前行的相应值。他们应该能够通过选择更改来更改特定行的值。

到目前为止我的进展是什么:我正在使用标准的 $.ajax();调用来填充这样的模型:

oModel = new sap.ui.model.json.JSONModel();
oModel.setData(dataToShow); // dataToShow being an array of entities

为简单起见,让dataToShow 中的每个实体如下所示:

{
    itemID: '123',
    state: 1 // state is an int column in the database
}

所以每个实体都有一个int 类型的属性“状态”。 我像这样创建一个普通的 oTable:oTable = new sap.ui.table.Table({...});

“itemID”列的定义如下:

oTable.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({ text: "Number of item" }),
    template: new sap.ui.commons.TextView({ text: "{itemID}" }),
    sortProperty: "itemID", // https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/table/demokit/Table.html#__2
    filterProperty: "itemID",
    width: gridTestColWidth
}));

对于第二列,我尝试在其中放置一个 ComboBox,如下所示:

// first, hard-code (for now) the list of possible items
var cbStateItems = [
    {
        Code: 0,
        //Code: '0', // I tried to set the number as string, which didn't affect the situation in any way
        Name: "test1",
        AdditionalText: "test11"
    },
    {
        Code: 1,
        Name: "test2",
        AdditionalText: "test22"
    },
    {
        Code: 2,
        Name: "test3",
        AdditionalText: "test33"
    }
];
var cbStateModel = new sap.ui.model.json.JSONModel({ items: cbStateItems });

var cbStateTemplate = new sap.ui.core.ListItem({
    key: "{Code}",
    text: "{Name}",
    additionalText: "{AdditionalText}"
});

var cbState = new sap.m.ComboBox({
    // here, all commented lines - I tried to uncomment one or couple of them at a time in different groups of uncommented lines to test (first, first and second, etc.)
    //text: '{state}',
    //selectedKey: '{state}',
    items: {
        path: '/items',
        template: cbStateTemplate,
        //selectedItemId: '{state}',
        templateShareable: false
    },
    showSecondaryValues: true,
    //selectedItemId: '{state}',
    //selectedKey: '{state}',
    //key: '{state}',
    //value: "{Name}",
    selectedKey: function (key) {// here, I thought, that maybe I can implement the binding manually. I know, that this is a prop of type string, but thought, that I could pass it a function, that returns a string - does not get called
        debugger;
        if (typeof (key) !== 'undefined' && key !== null) {
            return cbStateItems[key].Name;
        } else {
            return '0';
        }
    },
    selectionChange: function (oControlEvent) {
        var gewrgter = oModel;
        debugger;
    }
}); //.bindProperty("selectedKey", "state"); //.bindProperty("selectedItemId", "state"); none of those work
debugger;
cbState.setModel(cbStateModel);

var cbStateCol = new sap.ui.table.Column({
    label: new sap.ui.commons.Label({ text: "State" }),
    template: cbState,
    width: gridTestColWidth
});
oTable.addColumn(cbStateCol);

最后,我调用oTable.setModel(oModel); 在网格中显示数据。

我从数据库中获取的数据在所有实体的“状态”列中包含值 null、0、1 或 2。

主要问题: oTable 中的所有行都没有在 State 列和其中的 ComboBox 中选择任何内容,尽管它们都有一个非空值(实际上,只有第一个数据库表中的行在State列中的值为null)

每次我测试这个(不同的行未注释),我看到数据成功加载到 oTable 后的两种情况之一:

  1. 当我选择更改某一行的值时,它的“名称”属性的值在 ComboBox 控件的文本框部分显示为文本。但是当我向下滚动行时,看起来这个值“卡”在第三行。当我滚动一次(一次 4 行)时,selectedValue(让它成为'test33')离开该行,我在其中进行了 selectionChange 并成为此之后第 4 行的 ComboBox 中的“选定”值.如果我再次滚动,这个值“test33”会“向下移动”另外 4 行。当我展开 ComboBox 时,我看到突出显示的项目就是我选择的项目。
  2. 如果我取消注释,例如,此行:selectedItemId: '{State}',进行 selectionChange,ComboBox 的文本框部分不会显示任何内容,尽管所选项目突出显示为“已选择”。

我现在完全糊涂了,因为我期待 selectedItemId: '{State}'selectedKey: '{State}' 将为我完成“绑定”工作,但他们似乎没有。 提前感谢您的帮助和建议!

【问题讨论】:

    标签: combobox binding sapui5


    【解决方案1】:

    当您使用多个数据模型时,使用命名模型总是更好的方法。这可能会解决您的应用程序的多模型问题。这是一种使用 XML 视图的方法

    <mvc:View
    controllerName="com.sap.app.controller.Detail"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:core="sap.ui.core"
        xmlns:table="sap.ui.table"
        xmlns="sap.m">
        <Page title="Detail section">
            <table:Table 
            rows="{tableModel>/items}">
            <table:columns>
                <table:Column>
                    <Label text="Item ID" />
                    <table:template>
                        <Text text="{tableModel>itemID}"/>
                    </table:template>
                </table:Column>
                <table:Column>
                    <Label text="State" />
                    <table:template>
                        <ComboBox
                            selectedKey="{tableModel>state}"
                            items="{cbState>/items}">
                            <core:Item key="{cbState>Code}" text="{cbState>Name}" additionalText="{cbState>AdditionalText}"/>
                        </ComboBox>
                    </table:template>
                </table:Column>
            </table:columns>
        </table:Table>
        </Page>
    </mvc:View>
    

    控制器代码:

        var oTabDataset = [
                {
                    itemID: '123',
                    state: 1
                },
                {
                    itemID: '255',
                    state: 2
                },
                {
                    itemID: '326',
                    state: 3
                },
                {
                    itemID: '456',
                    state: 4
                }
            ];
            var oTableModel = new JSONModel({ items: oTabDataset });
            this.getView().setModel(oTableModel, "tableModel");
    
            var cbStateItems = [
                {
                    Code: 0,
                    Name: "test1",
                    AdditionalText: "test11"
                },
                {
                    Code: 1,
                    Name: "test2",
                    AdditionalText: "test22"
                },
                {
                    Code: 2,
                    Name: "test3",
                    AdditionalText: "test33"
                },
                {
                    Code: 3,
                    Name: "test4",
                    AdditionalText: "test44"
                }
            ];
            var cbStateModel = new JSONModel({ items: cbStateItems });
            this.getView().setModel(cbStateModel, "cbState");
    

    【讨论】:

    • 感谢您的帮助!我尝试了您的解决方案...当我在一个特定行上选择更改并向下滚动时,现在仅为该行保留所选值。它不会“向下移动”到另一行。我需要提一下,这在使用//selectedKey: '{TableModel&gt;state}', 时不起作用,但在使用selectedItemId: '{TableModel&gt;state}' 时不起作用。坏消息是我仍然没有让我们称之为“初始”绑定。 selectedKey: function (key) {...} 仍然没有被调用。我希望 selectedKey: '{...}'selectedItemId: '{...}' 能够完成这项工作,但他们仍然没有。
    • 好的,我现在才开始工作。 :) selectedKey 绝对不是事件,而是属性,这就是导致问题的原因。现在selectedKey="{tableModel&gt;state}" 完成了这项工作。我现在有初始绑定,以及当我在特定行上的 SelectionChange 时。再次感谢! :)
    【解决方案2】:

    我发布这个以防万一,虽然它与@Matbtt 或@Qualiture 响应的质量相比感觉有点脆弱。

    选择框有一个 .setSelectedItem() 函数,它需要一个选择列表项作为输入。在这段代码中,我从视图中获取一个选择列表,获取它的第一个条目并使其被选中。

    var oSelect = this.getView().byId("SubsSelect")
    var oFirstItem = oSelect.getItems()[0];  // I only need to get the first - you may care to iterate the list and match keys to the row etc.
    oSelect.setSelectedItem(oFirstItem)
    oSelect.fireChange(firstItem) // I then invoke the change event to kick off some code.
    

    不能直接满足您的需求,但可能会有所帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-04-08
      • 2015-07-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-08-15
      • 2016-06-15
      相关资源
      最近更新 更多