Wie Vaadin-Grid-Element-Auswahl als Google Drive-Auswahl verwenden?

Question

Da ist mein Problem.

Ich versuche, das <vaadin-grid> Element als Datei-Explorer zu verwenden, und ich habe ein Problem mit der Auswahl.

Dies ist, was ich reproduzieren wollen:

• Wenn ich auf nur eine Zeile (eine beliebige Stelle auf der Reihe), ist die andere Leitung/nicht ausgewählte sind.
• Wenn ich auf die Markierungsauswahl (oder STRG-Taste) klicke, wird die vorgewählte Linie beibehalten und ich kann mehrere Linien auswählen.
• Aber zu dem Zeitpunkt, als ich auf eine andere Zeile (ohne CTRL und nicht auf das Kontrollkästchen) klicke, wird nur diese angeklickte Zeile ausgewählt.

(für die STRG-Taste ich weiß, es ist aus dem Zusammenhang, nur für das Beispiel :)).

Also, es ist eine Mischung aus Einzel- und Multiselektion. Derzeit

• in ‚Multi‘ Auswahlzustand, wenn ich auf eine Zeile klicken, wird diese Zeile nicht ausgewählt ist, und es gibt kein Ereignis zu sagen, dass diese Zeile geklickt wurde, ist der einzige Weg, auf dem klicken Kontrollkästchen.
• Im 'single' Auswahlzustand, wenn ich auf eine Zeile klicke, ist diese Zeile ausgewählt, aber ich kann keine Mehrfachauswahl treffen.

Wissen Sie, wie ich das kann oder was ist der bessere Ansatz?

Answer 1

Dies ist also ein Beispiel, um auf meine Anfrage auf jsfiddle zu reagieren. Danke an Tomi Virkki und Jouni Koivuviita, die mir geantwortet haben.

Um mein Problem zu beheben, ist es am besten, die neue Iteration des Vaadin-Grid (v2.0) zu verwenden. Dies wird mir erlauben, die Auswahl zu bekommen, die ich wollte (STRG-Taste war ein Bonus in meiner Anfrage), wenn ich auf eine Zeile klicke, wird die Zeile ausgewählt und um eine benutzerdefinierte Auswahl zu erhalten, verwende ich das Kontrollkästchen.

Damit, dass dies der Code ist, dass die Arbeit:

<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> 

Das on-active-item-changed="activeItemChanged" Attribut, das diese Funktion aufrufen, wird nur die Zeile ‚aktiv‘ wählen, wenn eine Zelle ausgewählt wird, und die <vaadin-grid-selection-column frozen></vaadin-grid-selection-column> Wird für die Checkbox-Spalte verwendet.