从表到对话框的数据绑定+从对话框到表SAPUI5的更新数据

时间:2014-01-15 14:16:14

标签: data-binding textfield sapui5

我有以下功能,它是对话框的一部分(数据应该与数据表绑定):

handleChangeRow : function() {

        var oTable = sap.ui.getCore().getElementById('WorkOrder');

        var oModel2 = oTable.getModel("test");

        //var oModel2 = oTable.getModel();

        console.log("oModel2 : " + oModel2);

        var odata = oModel2.getProperty("/workorderdata");

        console.log("odata : " + odata);
        var selIndex = oTable.getSelectedIndex();
        var selectedDataObject = odata[selIndex];

        var oDialog = new sap.ui.commons.Dialog("Dialog", {
            modal : true,
            closed : function(oControlEvent) {
                sap.ui.getCore().getElementById('Dialog').destroy();
            }
        });

        oDialog.setTitle("Change Work Order");
        var oLayout = new sap.ui.commons.layout.MatrixLayout( {
            columns : 3,
            width : "100%"
        });

        var oTF = new sap.ui.commons.TextField("scopeITRequestCode", {
            tooltip : 'ScopeIT Request Code',
            editable : true,
            width : '200px',
            value: "{test>/workorderdata/0/scopeITRequestCode}"
        });

        var oLabel = new sap.ui.commons.Label("lbscopeITRequestCode", {
            text : 'ScopeIT Request Code',
            labelFor : oTF
        });

        oLayout.createRow(oLabel, oTF);
}

value: "{test>/workorderdata/0/scopeITRequestCode}"使用模型的"test" id我试图进入模型数据:

success : function(data) {          
                this.model = new sap.ui.model.json.JSONModel();

                this.model.setData({

                    workorderdata: data

                });
                sap.ui.getCore().setModel(this.model, "test");
}

工作正常,但仅适用于单个文本字段。如何更改引用"test>/workorderdata/0/scopeITRequestCode"以使更改具有动态性,用户可以更改所有文本字段?换句话说,如何将表格中行的选定单元格的值与对话框中文本字段的值绑定?

1 个答案:

答案 0 :(得分:6)

您可以在此处找到传递给rowSelectionChange事件的参数: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.table.Table.html#event:rowSelectionChange

说完并假设对话框绑定到与您的表相同的模型后,您的代码可能如下所示:

handleChangeRow : function(oEv) {
        var oBindingContext = oEv.getParameter("rowContext");
        var oPath = oBindingContext.getPath();

        var oDialog = new sap.ui.commons.Dialog("Dialog", {
            title : "Change Work Order",
            modal : true,
            closed : function(oControlEvent) {
                sap.ui.getCore().getElementById('Dialog').destroy();
            }
        });
        var oLayout = new sap.ui.commons.layout.MatrixLayout( {
            columns : 3,
            width : "100%"
        });

        var oTF = new sap.ui.commons.TextField("scopeITRequestCode", {
            tooltip : 'ScopeIT Request Code',
            editable : true,
            width : '200px',
            value: "{test>"+ oPath +"/scopeITRequestCode}"
        });
        var oLabel = new sap.ui.commons.Label("lbscopeITRequestCode", {
            text : 'ScopeIT Request Code',
            labelFor : oTF
        });
        oLayout.createRow(oLabel, oTF);
}

不幸的是我不确定如何获取模型名称,但是如果省略绑定中的模型名称并使用setModel而不是更有活力,那么你可能也没问题:< / p>

oDialog.setModel(oBindingContext.getModel());

由于TextField和Table绑定在同一模型上,因此该字段的更新将更新两个控件。你试图用TextField实现的是一个所谓的TwoWayBinding(从模型中获取一个值(OneWay)并在更改时将其写回(TwoWay)),例如, ODataModel不支持。您可以这样检查:

myModel.isBindingModeSupported(sap.ui.model.BindingMode.TwoWay);

此处有关绑定和绑定模式的更多详细信息: https://openui5.hana.ondemand.com/#docs/guide/Introduction.1.html https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.model.BindingMode.html https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.model.Model.html#isBindingModeSupported

GL 克里斯