0

有我的问题。

我正在尝试将该<vaadin-grid>元素用作文件资源管理器，但我在选择时遇到了问题。

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

  • 当我只单击一行（行上的任何位置）时，另一行未被选中。
  • 如果我单击复选框选择（或 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 回答