根据文本值设置图标

时间:2015-04-28 12:19:17

标签: javascript sapui5

我需要构建一个由2列组成的表 - 第一列是名称,第二列是该人是否被批准。

这是我从服务器获得的JSON:

{"records":[
{"approved":"Yes","name":"Doe John"},
{"approved":"No","name":"Doe Jane"}]}

我使用上面的JSON将模型设置为表。

我需要在第二列中显示图标,具体取决于“已批准”密钥的值:sap.ui.core.IconPool.getIconURI("accept")如果获得批准,sap.ui.core.IconPool.getIconURI("decline")则为其他方式。

以下是我尝试定义表格行的方法:

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data); //the above JSON response
oTable = sap.ui.getCore().byId("tableId");
oTable.setModel(oModel);
oTable.bindItems({
    path: "/records", 
    template: new sap.m.ColumnListItem({
        cells : [ 
        new sap.m.Text({text: "{name}"}), 
        new sap.ui.core.Icon({ //my problem starts here
            path: "approved",
            formatter: function(approved){
                if (approved==="Yes"){return new sap.ui.core.IconPool.getIconURI("accept");}
                else{return new sap.ui.core.IconPool.getIconURI("decline");};
            }
        }), 
        ]
    })
});

我无法正确定义Icon列。上面的代码显示了我在搜索答案一段时间后尝试做的事情。

我怎样才能让它发挥作用?

1 个答案:

答案 0 :(得分:2)

几乎不错:-)您忘了包含要应用格式化程序的字段(在本例中为src

更改

    new sap.ui.core.Icon({
        path: "approved",
        formatter: function(approved){
            if (approved==="Yes"){return new sap.ui.core.IconPool.getIconURI("accept");}
            else{return new sap.ui.core.IconPool.getIconURI("decline");};
        }
    }),

    new sap.ui.core.Icon({
        src : {
            path: "approved",
            formatter: function(approved){
                if (approved==="Yes"){return new sap.ui.core.IconPool.getIconURI("accept");}
                else{return new sap.ui.core.IconPool.getIconURI("decline");};
            }
        }
    }),