Использование значков узлов в компоненте Vaadin Flow / 14 TreeGrid - PullRequest
Новая
       43

Использование значков узлов в компоненте Vaadin Flow / 14 TreeGrid

2 голосов
/ 17 апреля 2020

Пример (VueJs / Vuetify ) я хочу достичь:

enter image description here

У Ваадина есть только TreeGrid#addHierarchyColumn(ValueProvider), что не позволяет добавлять иконки.

Ответы [ 2 ]

3 голосов
/ 17 апреля 2020

Основываясь на ответе Тату Лунда, мы испекли нашу собственную версию, протестированную с Ваадином 14.1.23 

/**
 * {@code IconTreeGrid} adds a convenience method for a `TreeGrid` with node icons.
 *
 * Based on these answers:
 *
 * + https://vaadin.com/forum/thread/17625675/treegrid-displaying-icon-for-hierachy-column
 * + https://stackoverflow.com/a/61268891/868941
 */
static class IconTreeGrid<T> extends TreeGrid<T> {

    IconTreeGrid(HierarchicalDataProvider<T, ?> dataProvider) {
        super(dataProvider);
    }

    public Column<T> addHierarchyColumn(Icon icon, ValueProvider<T, ?> valueProvider) {
        final Column<T> column = addColumn(TemplateRenderer.<T>of(
            "<vaadin-grid-tree-toggle leaf='[[item.leaf]]' expanded='{{expanded}}' level='[[level]]'>" +
            "<iron-icon icon='[[item.icon]]' style='margin-right: 0.2em; [[item.style]]'></iron-icon>[[item.name]]" +
            "</vaadin-grid-tree-toggle>")
            .withProperty("leaf", item -> !getDataCommunicator().hasChildren(item))
            .withProperty("icon", item -> icon.getElement().getAttribute("icon"))
            .withProperty("style", item -> icon.getElement().getAttribute("style"))
            .withProperty("name", item -> String.valueOf(valueProvider.apply(item))));
        final SerializableComparator<T> comparator =  (a, b) ->
            compareMaybeComparables(valueProvider.apply(a), valueProvider.apply(b));
        column.setComparator(comparator);
        return column;
    }

}

Работает как шарм.

2 голосов
/ 17 апреля 2020

Эта функция еще не включена в платформу Vaadin 14, но она только что была фактически реализована и приближается к следующей вспомогательной версии, т.е. 14.2

. Между тем, возможно иметь Обходной путь с использованием Template Renderer , как я сделал это в моем FileSelect компоненте.

...