如何使用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元素選擇作爲谷歌驅動器選擇？

回答

相關問題