如何将UI5表格字段的X替换为ObjectMarker Flagged图标

我通过OData调用获取JSON数据并绑定到SAP UI5的Table控件中，其中Sucursalesflag字段的值为X或空值。我希望将原本显示X的位置替换为ObjectListItem中的ObjectMarker（type="Flagged"）图标，而非显示文本X。以下是我的表格代码和控制器代码：

表格代码 #

<Table id="bSucursales" inset="false" items="{/}" visible="false" enableBusyIndicator="true">
  <columns>
    <Column>
      <Text text="{i18n>colSucursalesid}" />
    </Column>
    <Column>
      <Text text="{i18n>colSucursalesnombre}" />
    </Column>
    <Column>
      <Text text="{i18n>colSucursalesdircalle}" />
    </Column>
    <Column>
      <Text text="{i18n>colSucursalesdirnumero}" />
    </Column>
  </columns>
  <items>
    <ColumnListItem press="" type="Active">
      <Text text="{Sucursalesdepto}"/>
      <Text text="{Sucursalesfono1}"/>
      <Text text="{Sucursalesfono2}"/>
      <Text text="{Sucursalesactiva}"/>
      <Text text="{Sucursaleshoraini}"/>
      <Text text="{Sucursaleshorafin}"/>
      <Text text="{Sucursalescolacion}"/>
      <!-- <ObjectMarker type="Flagged"/> -->
      <Text text="{Sucursalesflag}"/>
    </ColumnListItem>
  </items>
</Table>

控制器代码 #

var bSucursales = this.byId("bSucursales");
bSucursales.setVisible(true);
oDataModel.read("/" + resultado2 +"?$filter=Maestropais eq '" + resultado + "'" + "and Maestrometodo eq '" + metodo + "'", {
  success: function(oData, response) {
    var oResults = oData.results;
    oModel.setData(oResults);
    bSucursales.setModel(oModel);
  },
  error: function(oError) {
  }
});

请问如何实现这一需求？

这里有两种实用的方式可以实现你的需求，我先推荐最直接的绑定表达式方案：

方式1：使用XML绑定表达式控制可见性 #

直接修改XML视图里的ColumnListItem内容，把原来的<Text text="{Sucursalesflag}"/>替换为ObjectMarker，并通过绑定表达式控制它的显示状态：

<ColumnListItem press="" type="Active">
  <!-- 其他原有控件保持不变 -->
  <Text text="{Sucursalescolacion}"/>
  <!-- 替换成以下代码 -->
  <ObjectMarker 
    type="Flagged" 
    visible="{= ${Sucursalesflag} === 'X' }"
  />
</ColumnListItem>

这个绑定表达式{= ${Sucursalesflag} === 'X' }会自动判断字段值：

• 当Sucursalesflag等于X时，visible属性为true，标记图标显示
• 当字段为空或其他值时，visible为false，图标自动隐藏

方式2：使用控制器格式化函数（适合复杂逻辑扩展） #

如果以后需要支持更多标记值或者复杂判断逻辑，可以在控制器里定义一个格式化函数：

第一步：在控制器中添加格式化函数 #

// 控制器内定义格式化函数
formatFlagVisibility: function(sFlag) {
  // 这里可以根据需求扩展更多判断规则，比如支持其他标记字符
  return sFlag === 'X';
}

第二步：在XML中绑定到该函数 #

<ColumnListItem press="" type="Active">
  <!-- 其他原有控件保持不变 -->
  <Text text="{Sucursalescolacion}"/>
  <ObjectMarker 
    type="Flagged" 
    visible="{path: 'Sucursalesflag', formatter: '.formatFlagVisibility'}"
  />
</ColumnListItem>

注意事项 #

• 你的控制器数据绑定逻辑不需要修改，现有代码已经能正确传递字段值
• 务必保证ObjectMarker的type属性设置为"Flagged"，这样才会显示你需要的标记图标
• 使用格式化函数时，注意XML中引用的函数名要和控制器里的定义一致，并且用.开头表示引用当前控制器的方法

这样就能完美实现把X替换为标记图标的需求啦！

内容的提问来源于stack exchange，提问作者Naoto Amari