如何使用vaadin-grid元素选择作为Google驱动器选择？

Question

这是我的问题。

我试图将<vaadin-grid>元素用作文件浏览器，但是选择时遇到了问题。

这是我要复制的内容：

• 当我仅单击一行（在行中的任意位置）时，另一行未选中。
• 如果单击复选框选择（或CTRL键），它将保留预选的行，并允许我选择多行。
• 但是，当我单击另一行（没有CTRL而不是复选框）时，仅选中了此行。

（对于CTRL键，我知道它与上下文无关，仅用于示例：））。

因此，它是单选和多选的混合。 目前，

• 在“多”选择状态下，当我单击一行时，未选择该行，并且没有事件表明该行已被单击，唯一的方法是单击复选框。
• 在“单一”选择状态下，当我单击一行时，该行被选中，但是我无法进行多项选择。

您知道我该怎么做，还是更好的方法？

Answer 1

因此，这是一个响应我对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> on-active-item-changed="activeItemChanged"仅选择行“ active” <vaadin-grid-selection-column frozen></vaadin-grid-selection-column>用于复选框列。