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

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