Vaadin-grid показать / скрыть столбцы методом щелчка с использованием angular2

У меня есть сетка vaadin в моем проекте angular2 с разными столбцами, такими как (заголовок столбца: имя, фамилия, возраст, город, страна). Я пытаюсь скрыть и отобразить столбец с фамилией. всякий раз, когда я нажимал на заголовок столбца firsname, только столбец lastname должен скрывать / отображать в сетке vaadin.

Может ли кто-нибудь помочь мне выполнить мою задачу.

Спасибо.

app.html

      <h2>hello</h2>
            <vaadin-grid>
            <table>
                <colgroup>
                    <col name="Name" click="res()">
                    <col name="Value">
                    <col name="Progress" hidable>
                </colgroup>

                <tbody>
                    <tr>
                        <td>Project A</td>
                        <td>10000</td>
                        <td>0.8</td>
                    </tr>
                    <tr>
                        <td>Project B</td>
                        <td>999999</td>
                        <td>0.8</td>
                    </tr>
                </tbody>
            </table>
        </vaadin-grid>

app.component.ts

    import { Component } from '@angular/core';
import { PolymerElement } from '@vaadin/angular2-polymer';


@Component({
  selector: 'my-app',
  templateUrl: 'app/app.html',

    styles: [`
                vaadin-grid {
                    height: 100%;
                }
          `],
    directives: [
        PolymerElement('vaadin-grid')
    ]
})
export class AppComponent {
    res(){
        console.log("hi tis is method");

    }
 }

angular vaadin vaadin-grid
person Nunna Suma    schedule 14.07.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Такой вариант использования элемента <vaadin-grid> создаст плохой UX. Заголовки сетки по умолчанию не предназначены для использования с интерактивными кнопками. Поэтому они выглядят неактивными, поэтому пользователь не будет думать о них как о интерактивных ссылках или кнопках.

Что касается Vaadin Grid, пожалуйста, подумайте о том, чтобы сделать столбцы скрытыми, указав атрибут <col hidable>. Это позволит пользователю переключать отображаемые столбцы, выбирая их в красивом раскрывающемся меню справа от заголовка сетки. См. Скрытие Например, раздел Columns в документации к сетке.

Если вы хотите переключаться между различным содержимым одним щелчком мыши, лучше вместо этого использовать элементы, специально предназначенные для этого, например <paper-tabs>.

Решение в Plunker: https://plnkr.co/edit/Sz92H4?p=preview

Ваш вариант использования было сложно реализовать, потому что требования также не разработаны в Vaadin Grid API. Мне пришлось применить несколько неприятных обходных путей, чтобы добиться этого. Пожалуйста, используйте решение для обучения, а не слепое копирование кода. Предупреждения объясняются ниже.

Как выполнить привязку для события щелчка заголовка сетки

Во-первых, в Vaadin Grid содержимое DOM не является динамическим. Они рассматриваются как начальная конфигурация и не используются непосредственно в качестве содержимого сетки. Поэтому привязать заголовок к клику в шаблоне нельзя.

В моем решении мы прикрепляем прослушиватель событий к самой сетке. Уловив щелчок по сетке, нам нужно вручную определить, был ли нажат заголовок, и найти индекс столбца, по которому щелкнули. Для этого мы:

  1. Получите ссылку на цель события. Щелчок происходит где-то в локальном DOM сетки. event.target вернет сетку вместо фактической цели события, если Polymer использует Shadow DOM (по умолчанию отключено). Используйте Polymer API, чтобы обеспечить правильную цель независимо от настроек Polymer:

    var target: Element = (<any> window).Polymer.dom(event).rootTarget;

  2. Проверьте цель щелчка и все элементы в дереве DOM до конца (если Polymer находится в режиме Shadow DOM) или саму сетку (если Polymer использует Shady DOM, который является режимом по умолчанию), чтобы найти элемент ячейки заголовка столбца. Для этой проверки мы используем Polymer API для проверки имени класса элемента. Мы устанавливаем собственное имя класса для заголовка первого столбца имени в методе ngAfterViewInit().

    • If the header cell element is found, stop the search and call this.toggleLastNameVisible();.
    • Если элемент ячейки заголовка не найден, значит, был нажат не первый заголовок сетки имени. Ничего не делать.

Обратите внимание, что мы хотим реагировать на щелчок, но мы должны прослушивать событие «mouseup» в сетке вместо события щелчка. Причина в том, что иногда сетка повторно отображает свое содержимое после щелчка по заголовку, что нарушает поиск элемента ячейки заголовка. Mouseup здесь работает, потому что он запускается до того, как щелкнет процесс сетки.

Как программно отображать и скрывать столбцы

Теперь, когда мы решили проблему привязки щелчка заголовка, нам нужно отобразить выбранный столбец и скрыть остальные. И снова мы не можем просто привязать атрибут <col [hidden]="showOrHide"> в шаблоне, а также не можем использовать *ngIf для удаления скрытых столбцов. Поскольку содержимое DOM сетки не является динамическим.

Нам нужно было получить ссылку на элемент сетки и использовать API сетки:

@ViewChild('grid') gridRef: any;

toggleLastNameVisible(visible?: boolean) {
  this._isLastNameVisible = visible !== undefined ? visible : !this._isLastNameVisible;
  var grid: any = this.gridRef.nativeElement;
  // Assuming that the last name is the second column
  grid.set('columns.1.hidden', !this._isLastNameVisible);
}

Обратите внимание, что ссылка добавлена ​​в шаблон: <vaadin-grid #grid ...>

Вы можете узнать больше об API сетки, прочитав Документация Vaadin Grid и Справочник по API . Надеюсь, это поможет лучше понять, как работает сетка.

person Anton Platonov    schedule 15.07.2016
comment
Спасибо @AntonPlatonov. Я просмотрел ваш код в плункере, но это не мое требование. Моя задача - таблица со столбцами (Имя, Фамилия, Возраст, Страна) всякий раз, когда я нажимал на заголовок столбца имени, тогда только столбец фамилии должен отображать / скрывать, а остальные столбцы не должны изменяться / изменяться этим методом. - person Nunna Suma; 18.07.2016
comment
Извините, я пропустил это, прочитав ваш вопрос. Однако теперь, когда мы знаем, как привязать к заголовку, щелкать и переключать столбцы, остальное несложно. Соответственно, я изменил раствор в плункере. - person Anton Platonov; 19.07.2016

arrow_upward
0
arrow_downward

Сделать это можно на основе * ngIf.

используйте условие * ngIf для вашей фамилии с логической переменной как false по умолчанию и делайте его истинным каждый раз, когда вы нажимаете на имя.

Надеюсь, у тебя это сработает :)

person Akshay Rao    schedule 14.07.2016
comment
Спасибо @AkshayRao. Я пробовал, но не работает, и он не определяет функцию щелчка. - person Nunna Suma; 14.07.2016
comment
Вы имеете в виду, что не можете использовать функцию (щелчок)? - person Akshay Rao; 14.07.2016
comment
Да, в функции щелчка я написал console.log (); чтобы проверить, получает ли он метод или нет. но бесполезно, он также не исключает журнал - person Nunna Suma; 14.07.2016
comment
Можете ли вы показать мне шаблон и компонент ur, чтобы я мог понять, что не так - person Akshay Rao; 14.07.2016
comment
Я поместил код в вопрос, где вы можете увидеть метод - res () в этом методе, я пишу console.log, но он не работает. @AkshayRao - person Nunna Suma; 14.07.2016
comment
Извините, но не могу применить функцию щелчка внутри сетки. Все еще работаю над этим и сообщу вам, как только я что-то получу - person Akshay Rao; 14.07.2016