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

我是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;

测试控制器：

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

问题是:

我定义的函数handleCheckBoxChange和handleTextAreaChange仅用于模板。但是我想定义一个函数，当我在textarea或checkbox中更改值时，它将被触发，我能做些什么来实现它

此外，我想检查表中的用户输入是否合法，换句话说，我想处理错误的用户输入，是否有更好的方法来实现它

---

请帮助我，非常感谢。

首先，模板是指定给列的，为每行创建克隆。因此，如果更改任何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")
         }


    }

HandletExtraceChange:功能（oEvent）{
var oChangedTextArea=oEvent.getSource（）；
//现在您可以处理该事件了
//比如说
var sGivenText=oChangedTextArea.getValue（）；
if（sGivenText.trim（）.length非常感谢。但是如果我想为textarea定义不同的规则，例如，对于textarea 1，值必须是一个数字，对于textarea 2，值必须是真或假，对于textarea 3，值必须是一些特定的字符串，等等。那么有没有直接获取所需textarea的方法（因此我可以为不同的文本区域定义不同的处理程序，而不是在一个templete函数中判断用户输入）？还有，是否可以将不同的控件绑定到模型，并且控件在一个模板中？@LearnToDeath检查以下两个链接。这些可能会对您有所帮助。再次感谢您。我已经检查了这两个链接，但我的情况不同。通过使用模板，我已经将控件绑定到模型中，但下面是问题on：我无法获取每个控件对象（因为它们是自动从模板克隆的），这意味着我不能为它设置单独的bindValue函数或格式化程序。我想SAPUI5有一个方法来处理这种情况，但我不知道。请帮助我，非常感谢。不。你不能绑定单独的值。但我对你的上下文有点困惑。你为什么需要它？在我的情况下，我得到了一个配置文件，其中包含许多段落我想在前端显示它，因为参数的数量很大，所以我想使用聚合绑定来绑定参数（在我的代码中我使用JSON模型）到表控件。此外，我还要求用户可以更改前端的参数，这就是我使用TextArea控件的原因。因此，我必须判断用户输入是否合法。如果我不能绑定单独的值，SAPUI5中是否有一个函数允许我获取特定的TextArea对象，以便为其设置处理程序？