Question

我是SAP OpenUI5的新手。我想在前端显示一个表，这是我的代码：

Test.view：

    var oPanel = new sap.ui.commons.Panel("panel",{text:"Calculated Fields"});  
    var tableData = { 
        "teamMembers":[ 
            {"firstName":"Clark", "lastName":"Kent", "gender":"male", "occupation":"Superman","enable": true}, 
            {"firstName":"Donald", "lastName":"Duck", "gender":"male", "occupation":"a millionare","enable": true},
            {"firstName":"Marge", "lastName":"Simpson", "gender":"female", "occupation":"a housewife","enable": false},
            {"firstName":"Jane", "lastName":"Marple", "gender":"female", "occupation":"a detective","enable": true},
            {"firstName":"Tony", "lastName":"Stark", "gender":"male", "occupation":"Ironman","enable": true},
            {"firstName":"James", "lastName":"Kirk", "gender":"male", "occupation":"a Starfleet captain","enable": true},
            {"firstName":"Hermione", "lastName":"Granger", "gender":"female", "occupation":"a witch","enable": false}]};

    var oModel = new sap.ui.model.json.JSONModel(tableData);
    var oTable = new sap.ui.table.Table("Table",{visibleRowCount: 7});

    oTable.addColumn(new sap.ui.table.Column("FirstName",{
        label: new sap.ui.commons.Label({ text: "First Name" }), 
        template: new sap.ui.commons.TextArea({ 
        value: "{firstName}",
        change: oController.handleTextAreaChange
            }), 
        width: "50px",
        name: "FirstName1"}));
    oTable.addColumn(new sap.ui.table.Column("LastName",{
        label: new sap.ui.commons.Label({ text: "Last Name" }), 
        template: new sap.ui.commons.TextArea({
        value: "{lastName}",
        change: oController.handleTextAreaChange
            }), 
        width: "50px",
        name: "LastName1"}));
    oTable.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({ text: "Enable" }), 
        template: new sap.ui.commons.CheckBox({
            checked: "{enable}",
            change: oController.handleCheckBoxChange
            }), 
        width: "50px" }));

    oTable.setModel(oModel);
    oTable.bindRows("/teamMembers");

    oPanel.addContent(oTable);  
    return oPanel;

Test.controller：

sap.ui.controller("testtomcat.TestTomcat", {
    handleCheckBoxChange: function(oEvent){
        alert("ChackBox changed");
        },
    handleTextAreaChange: function(oEvent){
        alert("TextArea changed");
    }
}

问题是：

我定义的函数handleCheckBoxChange和handleTextAreaChange仅用于模板。但我想定义一个函数，当我更改textarea或复选框中的值时会触发该函数，我该怎么做才能实现它？
此外，我想检查表中的用户输入是否合法，换句话说，我想处理错误的用户输入，有没有更好的想法来实现它？

请帮助我，非常感谢。

Answer 1

首先，为列指定模板，为每行创建克隆。因此，如果您更改任何textarea或复选框，将触发处理程序。现在，当调用处理程序时，您可以使用oEvent对象。

handleTextAreaChange: function(oEvent){
        var oChangedTextArea  = oEvent.getSource();

         //Now you can handle the event 
         //for example
         var sGivenText  = oChangedTextArea.getValue();
         if(sGivenText.trim().length<30){
             alert("Minimum 30 characters required")
         }


    }

如何使用SAP OpenUI5在前端显示表？

1 个答案: