SAPUI5: Как добавить пользовательские функции в меню столбцов ui.table? - PullRequest
Новая
       30

SAPUI5: Как добавить пользовательские функции в меню столбцов ui.table?

0 голосов
/ 31 октября 2018

Я бы хотел дать своим пользователям возможность переформатировать ячейки таблицы после загрузки данных в таблицу. Я думал, что хороший способ сделать это - добавить функциональность в меню столбцов. Таким образом, при щелчке по столбцу таблицы в меню добавляется стандартная «фильтрация, сортировка», но также имеется строка «форматирование», которая предоставляет несколько параметров (например, формат числовой ячейки от 55555,55 до 55,555,55)

К сожалению, я не смог найти способ добавить новую строку в меню моего столбца. Моя сортировка и фильтрация добавляются так: 

oTable.bindColumns("/columns", function(index, context) {
    var columnName = context.getObject().columnId;
    return new sap.ui.table.Column({
        label:columnName,
        template: columnName,
        sortProperty: columnName,
        filterProperty: columnName,
    });
});

Как добавить новые строки / функции в меню столбцов?

Обновление

Вот так выглядит моя таблица в представлении xml: 

 <table:Table id="uploadData" visibleRowCountMode="Auto" rowSelectionChange="tableRowSelectionChange" enableCellFilter="true" fixedColumnCount="0" enableBusyIndicator="true" customData="{Type: 'sap.ui.core.CustomData', key:'table-style-type', value:'custom-styled',  writeToDom: true }">
        <table:extension>
                <m:Button icon="sap-icon://download" press="onDataExportXLS" align="Right" />
        </table:extension>

        <table:columns>
                <!-- Columns dynamically created in controller -->
        </table:columns>
        <table:rows>
                <!-- Rows created in controller -->
        </table:rows>
</table:Table>

1 Ответ

0 голосов
/ 01 ноября 2018

sap.ui.table.Column имеет агрегат, называемый menu только для этого. Он принимает любые пользовательские пункты меню, которые отображаются при нажатии на столбец. Эта агрегация получает контроль sap.ui.unified.Menu.

В функции select агрегации MenuItem вы можете написать функцию для обработки того, что необходимо сделать при выборе пункта меню

sap.ui.table.Column Documents

sap.ui.unified.Menu документация

Отметьте это в этом примере здесь и его код здесь , щелкните по столбцу Количество , и вы увидите Мой пользовательский пункт меню

Фрагмент кода в XML,

<Column id="quantity" width="6rem" hAlign="End" sortProperty="Quantity"> <m:Label text="Quantity" /> <template> <m:Label text="{ path: 'Quantity', type: 'sap.ui.model.type.Integer' }" /> </template> <menu> <u:Menu ariaLabelledBy="quantity"> <u:items> <u:MenuItem text="My custom menu entry" select="onQuantityCustomItemSelect" /> <u:MenuItem text="Sort" select="onQuantitySort" icon="sap-icon://sort" /> </u:items> </u:Menu> </menu> </Column>

код в JS,

var oColumn = new sap.ui.table.Column({ label: "Some column Name", menu: new sap.ui.unified.Menu({ items: [new sap.ui.unified.MenuItem({ text:"My custom menu", select:function(oEvent) { pressEventOnItem(oEvent); }) ] }) })

...