Question

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

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

到目前为止我的进展如何：我使用的是标准的$ .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({...});

＆＃39; itemID＆＃39;列的定义如下：

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);来显示网格中的数据。

我从数据库中获得的数据包含列＆＃39; State＆＃39;中的值null，0,1或2。对于所有实体。

主要问题： oTable中的所有行都没有在State列和其中的ComboBox中选择任何内容，尽管它们都具有非null值（实际上只有第一个）数据库表中的行在列State）

中的值为null

每次我测试这个（取消注释不同的行），我会在oTable中成功加载数据后看到两种情况之一：

当我选择更改一行的值时，它的姓名＆＃39; property的值在ComboBox控件的文本框部分显示为文本。但是，当我向下滚动行时，看起来这个值是“卡住了”。说到第3排。当我滚动一次（一次4行）时，selectedValue（让它成为＆＃39; test33＆＃39;）离开行，在那里我做了selectionChange并成为＆＃39;选择＆＃39;此后第4行的ComboBox中的值。如果我再次滚动，这个值＆＃39; test33＆＃39;有点'向下移动'＆＃39;另外4排。当我展开ComboBox时，我看到突出显示的项目是我选择的项目。
如果我取消注释，例如，此行：selectedItemId: '{State}'，进行选择更改，ComboBox的文本框部分中不会显示任何内容，但所选项目会突出显示为“已选择”＃39;。

我现在完全感到困惑，因为我期待，selectedItemId: '{State}'或selectedKey: '{State}'将要进行约束＆＃39;为我工作，但他们似乎没有。提前感谢您的帮助和建议！

Answer 1

当您使用多个数据模型时，使用命名模型总是更好的方法。这可能会解决您的应用程序的多模型问题。以下是使用XML Views

进行此操作的方法

<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");

Answer 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.

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

OpenUI5：将sap.m.ComboBox绑定到sap.ui.table.Table

2 个答案: