0

私の問題があります。

<vaadin-grid>要素をファイル エクスプローラーとして使用しようとしていますが、選択に問題があります。

これは私が再現したいものです:

  • 1 行 (行の任意の場所) だけをクリックすると、他の行が選択されていません。
  • チェックボックスの選択 (または CTRL キー) をクリックすると、事前に選択された行が保持され、複数の行を選択できるようになります。
  • しかし、別の行をクリックすると (チェックボックスではなく CTRL なしで)、このクリックされた行だけが選択されます。

（CTRLキーについては、例のためだけに、文脈から外れていることを知っています:)）。

つまり、単一選択と複数選択の混合です。現在、

  • 「複数」選択状態で行をクリックすると、この行は選択されず、この行がクリックされたことを通知するイベントはありません。唯一の方法はチェックボックスをクリックすることです。
  • 「単一」選択状態では、行をクリックするとこの行が選択されますが、複数選択はできません。

どうすればそれができるか、またはより良いアプローチは何ですか?

4

1 に答える 1

0

したがって、これは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>

このon-active-item-changed="activeItemChanged"関数を呼び出す属性は、セルが選択されたときに「アクティブ」な行のみを選択<vaadin-grid-selection-column frozen></vaadin-grid-selection-column>し、チェックボックス列に使用されます。

于 2017-03-22T18:23:45.463 に答える