How to hide “Select All”-CheckBox from Table?

◇◆丶佛笑我妖孽 提交于 2021-02-10 16:19:43

问题


I want to remove the check box which enables selecting all items from the table (sap.m.Table).

I tried:

var oTable = this.byId('MyTableId');
oTable._getSelectAllCheckbox().setVisible(false);

It didn't work for me. Is there a way to set it false in XML? I know I can use CSS but I want to use CSS only if there is no other solution.


回答1:


sap.m.Table

(aka. Responsive Table)

Currently, there is no publicly documented API to enable/disable showing the "Select All"-CheckBox on sap.m.Table. Best practice in this case is to extend the control and to switch the bPreventMassSelection state accordingly.

Here is a snippet from the sample: https://embed.plnkr.co/pnpdRK7d7CxZXZ8s

sap.ui.define([
  "sap/m/Table",
  "sap/m/TableRenderer",
], function(Table, TableRenderer) {
  "use strict";

  return Table.extend("demo.control.MyResponsiveTable", {
    metadata: {
      properties: {
        showSelectAll: {
          type: "boolean",
          bindable: true,
        },
      },
    },

    setShowSelectAll: function(bValue) {
      this.bPreventMassSelection = !bValue;
      this.setProperty("showSelectAll", bValue);
      return this;
    },

    renderer: TableRenderer,
  });
});
<demo:MyResponsiveTable xmlns:demo="demo.control"
  showSelectAll="{/showSelectAll}"
  mode="MultiSelect">

Compared to _getSelectAllCheckbox, the above approach should be favored since:

  • _getSelectAllCheckbox is a private method.
    • Private methods are not intended to be used outside of the control definition.
    • Relying on private methods and/or manipulating the internal control (CheckBox) will break the app in future UI5 releases.
  • The bPreventMassSelection on the other hand is a simple flag which is already used widely in other controls that rely on sap.m.Table/.List internally. We can see that Table skips rendering the "Select All"-CheckBox if bPreventMassSelection is enabled.

sap.ui.table.Table

(aka. Grid Table)

In case someone was looking for the solution but with sap.ui.table.Table, set the enableSelectAll property to false:

<table:Table xmlns:table="sap.ui.table"
  enableSelectAll="false"
  selectionMode="MultiToggle">



回答2:


oTable._getSelectAllCheckbox().setVisible(false); worked as expected for me. I've added it as follows:

this._myDelegate = {
    onAfterRendering: function () {
        if (typeof this._getSelectAllCheckbox === "function" && this._getSelectAllCheckbox().isA("sap.m.CheckBox")) {
            this._getSelectAllCheckbox().setVisible(false);
        }
    }
};
oTable.addEventDelegate(this._myDelegate, oTable);
// Remove this._myDelegate from the table in `onExit` to avoid memory leak

Make sure you have the right table control on var oTable = this.byId("MyTableId");.



来源:https://stackoverflow.com/questions/51324035/how-to-hide-select-all-checkbox-from-table

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!