Как использовать выбор элемента vaadin-grid в качестве выбора диска Google?

Есть моя проблема.

Я пытаюсь использовать элемент <vaadin-grid> в качестве проводника, и у меня возникла проблема с выбором.

Это то, что я хочу воспроизвести:

  • Когда я нажимаю только одну строку (в любом месте строки), другая строка не выбрана.
  • Если я нажму на флажок (или клавишу CTRL), он сохранит предварительно выбранную строку и позволит мне выбрать несколько строк.
  • Но в то время, когда я нажимаю на другую строку (без CTRL и без флажка), выделяется только эта строка.

(для клавиши CTRL я знаю, что это вне контекста, просто для примера :)).

Итак, это смесь одиночного и множественного выбора. В настоящее время,

  • в состоянии «множественного» выбора, когда я нажимаю на строку, эта строка не выбрана, и нет события, указывающего, что эта строка была нажата, единственный способ - установить флажок.
  • В состоянии «одиночного» выбора, когда я нажимаю на строку, эта строка выбирается, но я не могу сделать множественный выбор.

Вы знаете, как я могу это сделать или какой подход лучше?


javascript html web-component polymer vaadin-grid
person Caribouflex    schedule 21.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, это пример ответа на мой запрос на jsfiddle. Спасибо Tomi Virkki и Jouni Koivuviita, которые ответили мне.

Чтобы решить мою проблему, лучше всего использовать новую итерацию vaadin-grid (v2.0). Это позволит мне получить желаемый выбор (клавиша CTRL была бонусом в моем запросе), когда я нажимаю на строку, строка выбирается, и для получения пользовательского выбора я использую флажок.

Чтобы этот код работал:

<dom-module id="test-component">
<template>
  <iron-media-query query="(max-width: 350px)" query-matches="{{narrow}}"></iron-media-query>

  <vaadin-grid id="grid" items="[[users]]" on-active-item-changed="activeItemChanged" page-size="20" size="1000000">

    <vaadin-grid-selection-column frozen>
    </vaadin-grid-selection-column>

    <vaadin-grid-column>
      <template class="header">First</template>
      <template>[[item.name.first]]</template>
    </vaadin-grid-column>

    <vaadin-grid-column hidden="[[narrow]]">
      <template class="header">Last</template>
      <template>[[item.name.last]]</template>
    </vaadin-grid-column>

  </vaadin-grid>

</template>
<script>
  document.addEventListener('WebComponentsReady', function() {
    Polymer({
      is: 'test-component',

      activeItemChanged: function(e) {
        var activeItem = e.detail.value;
        this.$.grid.selectedItems = [activeItem];
      },

      ready: function() {
        this.$.grid.dataProvider = function(params, callback) {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              callback(JSON.parse(this.responseText).results);
            }
          };
          xhttp.open("GET", "https://randomuser.me/api?results=20", true);
          xhttp.send();
        };
      }
    });
  });
</script>

The on-active-item-changed="activeItemChanged" attribute that call this function, will select only the line 'active' when a cell is selected, and the <vaadin-grid-selection-column frozen></vaadin-grid-selection-column> Is used for the checkbox column.

person Caribouflex    schedule 22.03.2017