mergeDuplicates="true" 在多选模式下效果不佳

Question

我想在多选表中实现mergeDuplicates，就像guideline所说：

但是在我的DEMO中，我的复选框中仍然有边框顶部，我该怎么办？我不想覆盖 UI5 CSS。

<Table
    id="table"
    mode="MultiSelect"
    growingScrollToLoad="true">
    <columns>
        <Column mergeDuplicates="true"><Text text="column1"/></Column>
        <Column><Text text="column2"/></Column>
        <Column><Text text="column3"/></Column>
    </columns>
</Table>

Answer 1

恕我直言，

mergeDuplicates

的概念与单元格内容绑定，因此不会扩展到选择器单元格。但显然，指导方针和控制概念并不完全匹配。

我建议稍微修改 Ash Kander 的提案。由于表格可能会在不同的时间点单独渲染各个

ColumnListItem

，因此附加到表格的

onAfterRendering

不会有帮助。

而是使用委托附加到项目的

onAfterRendering

。为了使其充分发挥作用，您必须在数据绑定开始克隆该模板之前尽早在项目模板上执行此操作。

在您的演示中，在创建并附加模型之前，可以在

onInit

中轻松实现此操作（我为模板指定了 id“cli”）：

this.byId("cli").addEventDelegate({
  onAfterRendering: function(e) {
    var $dom = e.srcControl.$();
    if ( $dom.has(".sapMListTblCellDup") ) {
      $dom.find("td.sapMListTblSelCol").css("border-topcolor",
          "transparent");
    }
  }
});

参见 http://plnkr.co/edit/eNb83KvF1BpAp5eGSpOS?p=preview .

Answer 2

似乎是表格渲染器中的一个错误。现在你不可能在不接触 CSS 的情况下解决这个问题。

这可以工作，但是这会覆盖CSS（在你的控制器中）：

onAfterRendering: function() {
    $('.sapMListTblSelCol').each(function(index, col) {
        if ($(col).next().hasClass('sapMListTblCellDup')) {
            $(col).css('border-top-color', 'transparent')
        }
    });
},

Answer 3

我在 style.css 中解决这个问题的方法：

td:has(+td.sapMListTblCellDup) {
opacity: 0 !important;
pointer-events: none !important;
}