我在XML视图中的表格为
<Table id="testtable" xmlns="sap.ui.table"
rows="{/testdata}"
alternateRowColors="true">
<columns>
<Column hAlign="Center" label="Col1">
<template>
<m:Text text="{dataX}" wrapping="false" />
</template>
</Column>
<Column hAlign="Center" label="Col2">
<template>
<m:Text text="{dataY}" wrapping="false" />
</template>
</Column>
<Column label="Col3">
<template>
<m:HBox>
<core:Icon src="sap-icon://show" color="{path: 'test', formatter: '.setIconColour'}" />
<core:Icon src="sap-icon://edit" color="{path: 'test', formatter: '.setIconColour'}" />
<core:Icon src="sap-icon://print" color="{path: 'test', formatter: '.setIconColour'}" />
</m:HBox>
</template>
</Column>
</columns>
</Table>
从之前的Q在SO,我可以使用formatter操作图标属性为。
控制器。
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function (Controller, JSONModel, XMLModel) {
"use strict";
return Controller.extend("MyController", {
onInit : function () {
var that = this;
let model = new JSONModel(this.getData());
this.getView().setModel(model);
},
setIconColour: function (value) {
if (value === 0) {
return "Default";
} else if (value === 1) {
return "#007bff";
} else if (value === 2) {
return "Positive";
} else if (value === 3) {
return "Negative";
}
},
getData: function(){
return {"testdata": [
{ "dataX": 1, "dataY": "testdata", "test": 0},
{ "dataX": 2, "dataY": "testdata", "test": 2},
{ "dataX": 3, "dataY": "testdata", "test": 3},
{ "dataX": 4, "dataY": "testdata", "test": 1}
]};
}
})
});
在这里,我可以知道我如何检查多个条件,例如,。
1) 基于颜色属性的操作 test
价值和 row number (index)
数组的哪个索引及其对应的 test
价值
从上面我可以认为是传递多个参数到setIconColour(rowindex号和test)的值,如果我没有错。
我可以知道我怎么能做到这一点,希望它的明确:)
对于一个多变量的格式化控件使用这种语法。
<core:Icon src="sap-icon://show" color="{ parts : [ 'test', 'dataX' ], formatter: '.setIconColour'}" />
该函数需要调整为:
setIconColour: function (testValue, dataX) {
if (testValue === 0 && dataX === 1) {
return "Default";
} else if (testValue === 0 && dataX === 2) {
return "#ff0000";
} else if (testValue === 1) {
return "#007bff";
} else if (testValue === 2) {
return "Positive";
} else if (testValue === 3) {
return "Negative";
}
},