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

Question

这是我的问题。

我正在尝试将 <vaadin-grid> 元素用作文件浏览器，但 selection 有问题。

这就是我要重现的内容：

当我只单击一行（该行的任意位置）时，另一行 is/are 未 select 编辑。
如果我单击复选框 selection（或 CTRL 键），它将保留预先selected 行并允许我select 多行。
但是当我点击另一行时（没有 CTRL 也没有在复选框上），只有这个被点击的行被 selected。

（对于 CTRL 键，我知道它断章取意，仅作为示例 :)）。

因此，它是单一离子和多离子的混合体 select。目前，

在'multi' select离子状态下，当我点击一行时，这一行没有被select编辑，也没有事件表明这一行被点击了，唯一的方法是单击复选框。
在 'single' selection 状态下，当我点击一行时，这一行被 selected 但我不能做多个 selection。

你知道我该怎么做吗？或者更好的方法是什么？

Answer 1

所以这是响应我在 jsfiddle 上的请求的示例。感谢回答我的 Tomi Virkki 和 Jouni Koivuviita。

要解决我的问题，最好的方法是使用 vaadin-grid (v2.0) 的新版本。当我单击一行时，这将允许我获得我想要的 selection（CTRL 键在我的请求中是一个奖励），该行被 selected 并获得自定义 selection 我使用复选框。

允许这是有效的代码：

<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"属性，将select只有'active'行select单元格时，<vaadin-grid-selection-column frozen></vaadin-grid-selection-column>是用于复选框列。

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

How use vaadin-grid element selection as google drive selection?

html

javascript

web-component

polymer

vaadin-grid