根据 table 的行索引（行号）和模型数据的属性操作图标属性

Question

我在 XML 视图中有 table：

<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>

从 SO 中的上一个 Q 开始，我可以使用格式化程序操作图标属性：

控制器：

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（row/index 编号和测试）值如果我没记错的话，

请问我该怎么做，希望它清楚:)

Answer 1

对于多变量格式化程序，对格式化控件使用此语法：

<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";
  } 
},

根据 table 的行索引（行号）和模型数据的属性操作图标属性

Manipulating Icon properties based on row index (row number) of table and a property of Model Data

sapui5

根据 table 的行索引（行号）和模型数据的 属性 操作图标属性

Manipulating Icon properties based on row index (row number) of table and a property of Model Data

sapui5

根据 table 的行索引（行号）和模型数据的属性操作图标属性