基于表的行索引(行号)和模型数据的属性来操作图标属性。

问题描述 投票:-1回答:1

我在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}
                        ]};
                      }
            })
            });

Table would look as

在这里,我可以知道我如何检查多个条件,例如,。

1) 基于颜色属性的操作 test 价值和 row number (index) 数组的哪个索引及其对应的 test 价值

从上面我可以认为是传递多个参数到setIconColour(rowindex号和test)的值,如果我没有错。

我可以知道我怎么能做到这一点,希望它的明确:)

sapui5
1个回答
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";
  } 
},
© www.soinside.com 2019 - 2024. All rights reserved.