Question

我想在sap.m.Table中实现多级合并。我尝试在第二列中添加mergeDuplicates="true"，但它看起来像这样：

很奇怪。我将第一列的数据添加到第二列：<Text text="{name} {amount} "/>，拆分看起来像我想要的，但如何隐藏{name}数据？

在doc of sap.m.Column进行了一些研究，找到mergeFunctionName

你可以在＆＃34;＃＆＃34;之后将一个字符串参数传递给给定的函数。标志。例如＆＃34;数据＃myparameter＆＃34;：

我可以同时将{name}和{amount}传递给myparameter函数吗？

Answer 1

为了创建一个属性，在其中可以添加一个属性来保存可以由单个getter函数自动访问的主键，我们扩展了Text控件，如下所示。

sap.ui.define(
  ['sap/m/Text'],
  function(Text) {
    return Text.extend("namespace.controls.MergableText", {
      metadata: {
        properties: {
          mergeDependent: {
            type: "string",
            defaultValue: ""
          }
        }
      },
      renderer: function(oRm, oControl) {
        sap.m.TextRenderer.render(oRm, oControl); //use supercass renderer routine
      }
    });
  }
);

上面是一个名为MergableText.js的文件，可以将其存储在webapp的控件文件夹中。现在可以通过在命名空间中定义来使用它：

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:custom="namespace.controls"
controllerName="namespace.controller.PlannedOT">
        <Table>
                <columns>....</columns>
                <items>
                        <ColumnListItem>
                                ....
                                <custom:MergableText text="{>amount}" mergeDependent="{name}">                                          </custom:MergableText>
                                ..... 
                        <ColumnListItem>
                </items>
        </Table>
</mvc:View>

通过这种方式，只能根据金额对名称的依赖性来合并金额。

Answer 2

根本原因是您应该为绑定正确定义sorter。

items="{
        path: '/',
        sorter: [{
                   path: 'name', 
                   descending: false,
                   group:true
                 }, {
                   path: 'amount', 
                   descending: false,
                   group:true
                }]
       }"

Answer 3

使用mergeNameFunction是一种很好的方法:)你可以使用任何强制比较的绑定内部方法。

E.g。

https://github.com/tugrul/node-mcrypt

无需其他修改即可使用

Answer 4

最新答复，但希望仍然有用。我以此为基础开发了自己的解决方案。

好消息：无需扩展控件或对表进行分组就可以实现您想要的目标。

添加sap.ui.core库：

    xmlns:core="sap.ui.core"

像这样向您的单元格添加自定义数据：

<customData>
    <core:CustomData key="mergeKey" value="{name}" />
</customData>

像这样在合并功能中使用此自定义数据：

mergeFunctionName="data#mergeKey"

当您使用合并的column1和column2的绑定作为第2列中的自定义数据的值时，魔术就会发生。这将阻止整个column2成为一个单元格，并且您会在公交车和卡车之间获得所需的分隔线。

最终解决方案：

<mvc:View
    controllerName="demo.FirstPage"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:semantic="sap.f.semantic"
    xmlns:core="sap.ui.core">

    <Table
        id="table"
        mode="MultiSelect"
        width="auto"
        items="{
            path: '/'
        }"
        growing="true"
        growingScrollToLoad="true">

        <columns>
            <Column
                mergeDuplicates="true"
                mergeFunctionName="data#mergeKey">
                    <Text text="column1"/>
            </Column>
            <Column
                mergeDuplicates="true"
                mergeFunctionName="data#mergeKey">
                    <Text text="column2"/>
            </Column>
            <Column>
                <Text text="column3"/>
            </Column>
        </columns>

        <items>
            <ColumnListItem id="cli" type="Detail">
                <cells>
                    <Text text="{name}">
                            <customData>
                                <core:CustomData key="mergeKey" value="{name}" />
                            </customData>
                    </Text>                 
                    <Text text="{amount}">
                            <customData>
                                <core:CustomData key="mergeKey" value="{name}{amount}" />
                            </customData>
                    </Text>                 
                    <Text text="{currency}, {size}"/>                   
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</mvc:View>

Screenshot of final result

如何在sap.m.Table中实现多级合并？

4 个答案: