javascript - 如何将对象[Table]中的数据绑定(bind)到其他对象[TimePicker]中

标签 javascript data-binding sapui5

我有问题,需要对两个对象使用一个模型。但我不知道该怎么做。 在综合中,我有一个模型(modelJSON),其中我将其与我的“Table”对象链接,但同时我需要在显示表格时(逐行),我还链接以同样的方式将数据传输到我的Timepicker...

目前它不起作用,因为它不列出时间选择器的数据,但列出表的数据。

这是结果:

--------------
Turno | Time |
------|------|
T1    |      |
      |      |
T2    |      |
      |      |
T3    |      |

这就是我需要的...

----------------------
Turno |     Time      |
------|---------------|
T1    | 01:00   14:00 |
      |               |  
T2    | 01:00   08:00 |
      |               |
T3    | 07:59   23:00 |

我的代码:

var modelJSON =  
            [
                {ID_TURNO : "T1",  H1 : '01:00', H2 : '14:00' },
                {ID_TURNO : "T2",  H1 : '05:59', H2 : '08:00' },
                {ID_TURNO : "T3",  H1 : '07:59', H2 : '23:00' }
            ];

    var oSection =
        new sap.uxap.ObjectPageSection({
                title: "Week " + targetWeek,
                subSections: new sap.uxap.ObjectPageSubSection({
                            blocks: 
                                new sap.ui.table.Table({
                                    width: "98%",
                                    selectionMode: sap.ui.table.SelectionMode.Single,
                                    visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,
                                    visibleRowCount: 2,
                                    rowSelectionChange: function(oEvent) {

                                        var path = oEvent.getParameter("rowContext").getPath();
                                        var oData = this.getModel().getProperty(path);

                                    },
                                    columns: [
                                        new sap.ui.table.Column({
                                            label: new sap.ui.commons.Label({ text: "Turno" }),
                                            template: new sap.ui.commons.TextView({ text: "{ID_TURNO}" }),
                                            width: '33px'
                                        }),
                                        new sap.ui.table.Column({
                                            label: new sap.ui.commons.Label({ 
                                                textAlign : "Center",
                                                text: "Time"
                                            }),
                                            template: new sap.ui.layout.form.Form({
                                                layout: new sap.ui.layout.form.ResponsiveGridLayout({
                                                breakpointL : 140
                                                }),
                                                formContainers: [
                                                    new sap.ui.layout.form.FormContainer({
                                                        formElements: [
                                                            new sap.ui.layout.form.FormElement({
                                                                fields: [new sap.m.TimePicker({
                                                                        valueFormat : "HH:mm",
                                                                        displayFormat : "HH:mm",
                                                                        placeholder : " ",
                                                                        width : "62px",
                                                                        value : "{H1}"
                                                                    }).addStyleClass("sapUiSizeCompact")
                                                                    ]
                                                            })
                                                        ]
                                                    }),
                                                    new sap.ui.layout.form.FormContainer({
                                                        formElements: [
                                                            new sap.ui.layout.form.FormElement({
                                                                fields: [new sap.m.TimePicker({
                                                                        valueFormat : "HH:mm",
                                                                        displayFormat : "HH:mm",
                                                                        placeholder : " ",
                                                                        width : "62px",
                                                                        value : "{H2}"
                                                                    }).addStyleClass("sapUiSizeCompact")
                                                                ]
                                                            })
                                                        ]
                                                    })
                                                ]    
                                            }),
                                            width: '95px',
                                            hAlign : "Center"
                                    })
                                    ]
                                }).setModel(new sap.ui.model.json.JSONModel(modelJSON))
                                .bindRows({ path: "/" })
                                .setVisibleRowCount(modelJSON.length)
                            })
                    });

谢谢! :)

最佳答案

您可以使用 VBox 控件示例代替使用表单:

 template: new sap.m.VBox({
    content: [new sap.m.TimePicker({                                                                        
                valueFormat : "HH:mm",                                                                        
                displayFormat : "HH:mm",                                                                        
                placeholder : " ",                                                                        
                width : "62px ",                                                                        
                value : "{H1}"                                                                    
            }).addStyleClass("sapUiSizeCompact"),
         new sap.m.TimePicker({
             valueFormat : "HH:mm",
             displayFormat : "HH:mm",
             placeholder : " ", 
             width : "62px",
             value : "{H2}"                                                
         }).addStyleClass("sapUiSizeCompact")
]
});


                                                            ]

关于javascript - 如何将对象[Table]中的数据绑定(bind)到其他对象[TimePicker]中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45972283/

相关文章:

javascript - 如何将 knockout.js 与 CMS 结合使用?

javascript - SAPUI5 元素的倒计时

javascript - 为什么nodelist没有forEach?

javascript - 使用 Moment.js 根据时间间隔计算 nextDueDate

model-view-controller - Backbone.js:避免 View →模型→ View 双重转换

javascript - Knockout - 将用户输入添加到表中时出现问题

css - OpenUI5 : Add margins on both sides to ToolPage

odata - 如何强制 SmartTable 加载所有项目?

javascript - 将变量传递给 Ajax URL

javascript - 外部加载页面的事件监听器