【问题标题】:Manipulating Icon properties based on row index (row number) of table and a property of Model Data根据表的行索引(行号)和模型数据的属性操作图标属性
【发布时间】:2020-05-14 03:20:40
【问题描述】:

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

从 SO 中的 prev 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(行/索引号和测试)值如果我没记错的话,

我可以知道我该怎么做,希望它清楚:)

【问题讨论】:

  • 将多个参数传递给您的格式化程序。
  • 嘿@Marc,我有这个想法,但我想知道我该怎么做...一个可以让我休息的样本:)
  • 你试过谷歌搜索sapui5 formatter multiple params吗?
  • @Codenewbie 好的,你能相应地更新问题吗?拥有dataX 非常令人困惑,导致下面的答案,而实际目标是没有dataX,对吗?
  • @Codenewbie 关于最后一个问题:stackoverflow.com/a/58806227/5846045 解释了何时调用格式化程序以及如何处理它。

标签: sapui5


【解决方案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";
  } 
},

【讨论】:

  • 先生,这里我要做的只是最后一行,或者如果只有一行我想为图标显示不同的颜色,我可以知道如何实现吗?
  • 使不同图标的颜色依赖于不同的变量
猜你喜欢
  • 1970-01-01
  • 2016-10-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-04-22
  • 2014-01-08
  • 2018-12-13
  • 2020-07-09
相关资源
最近更新 更多