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

有我的问题。如何使用vaadin-grid元素选择作为谷歌驱动器选择？

我试图使用<vaadin-grid>元素作为文件资源管理器，并且我遇到了选择问题。

这是我想重现什么：

当我点击只有一条线路（在行的任意位置），其他线路是/未选择。
如果我点击复选框选择（或CTRL键），它将保持预选行，并允许我选择多行。
但是当我点击另一行（没有CTRL而没有在复选框上）时，只有这个被点击的行被选中。

（对于CTRL键我知道它不在上下文中，只是为了示例:)）。

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

，当我点击某一行上，该行没有选择，没有事件告诉该行已被点击，唯一的办法是点击复选框。
在'single'选择状态下，当我点击一行时选中了这一行，但我无法做多选。

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

来源

2017-03-21 Caribouflex

所以这是一个例子来响应我的请求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-22 18:23:45 Caribouflex

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

回答

相关问题