将InPlace Edit动态分配给Row Repeater创建的文本字段

时间:2014-10-07 14:32:31

标签: sapui5

如何通过使用RowRepeater进行数据绑定动态创建的器件为TextFields分配InPlaceEdit控件?

基本上我有类似的东西:

someRowRepeater.bindRows("/path/to/an/array", new sap.ui.commons.TextField({value: "{value}"});

数组如下所示:

[{text: "some first value"}, {text: "some second value"}, ... ]

我已经尝试为每个TextField添加 id ,因此我可以在 onAfterRendering 中使用.byID()添加 InPlaceEdits 方法,通过将数组修改为[{text: "some first value", id: 0}, ...]并将TextField的构造函数修改为...TextField({text: "{value}", id: "{value}" + "{id}"});,然后我收到"{value}{id}" is not a valid ID.

的错误消息

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

这是一个有效的例子:

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.ui.commons,sap.ui.layout,sap.ui.ux3,sap.ui.table,sap.m"
                data-sap-ui-theme="sap_goldreflection">
        </script>

        <script>
            var data = {rows: [{text: "some first value"}, {text: "some second value"}]};
            var oModel = new sap.ui.model.json.JSONModel(data);

            var oTable = new sap.ui.table.Table({
                title: "Table column and data binding",
                showNoData : true,  
                columnHeaderHeight : 10,
            });
            oTable.setModel(oModel);

            oTable.addColumn(new sap.ui.table.Column({
                label: "My Column",
                template: new sap.ui.commons.InPlaceEdit("IPE1",{
                    content: new sap.ui.commons.TextField({value: "{text}"})
                }),
            }));

            oTable.bindRows("/rows");

            oTable.placeAt("content");
        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

希望这有帮助。

问候。