Question

有我的问题。

我正在尝试将<vaadin-grid>元素用作文件资源管理器，我对选择有疑问。

这就是我想要重现的内容：

当我只点击一行（行的任何位置）时，另一行是/未被选中的。
如果我点击复选框选择（或CTRL键），它将保留预选的行，并允许我选择多行。
但是当我点击另一行时（没有CTRL而不是复选框），只选择了这条点击的行。

（对于CTRL键，我知道它不在上下文中，仅用于示例:)）。

所以，它是单选和多选的混合。目前，

在'multi'选择状态下，当我点击一行时，未选中此行且没有事件告诉该行已被点击，唯一的方法是单击复选框。
在“单一”选择状态下，当我点击一行时，此行被选中，但我无法进行多项选择。

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

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>用于复选框列。

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

1 个答案: