Polymer Vaadin Grid v2 迁移

Question

我正在尝试将我的 vaadin-grid 转换为 v2，以便我可以使用选择方法将所选行提取为 json 或 csv。

在评论中我的工作 v1 vaadin 网格，它导入 JSON 对象。

导入文件中包含的导入：

• vaadin-grid.html
• vaadin-grid-selection-column.html
• vaadin-grid.html
• paper-elements/paper-elements.html
• 列出项目

我的 vaadin 包含来自以下位置的所有文件： https://github.com/vaadin/vaadin-grid

我正在使用的示例文件： https://jsfiddle.net/Saulis/sse7d93h/

    <!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="my-afmelden-test">

  <script>
  var grid = document.getElementById('afmelden-grid');
  grid.items = window.employees;
  var data = window.employees[index];
  </script>

  <template>
  <!--  <iron-ajax
      auto
      url = "../../signups.json"
      handle-as="json"
      last-response="{{gridData}}" ></iron-ajax> -->
<!-- <vaadin-grid id="afmelden-grid" items="{{gridData}}" visible-rows="0" selection-mode="multi">
  <table>
    <colgroup>
      <col name="user.name.first" />
      <col name="user.name.last" />
      <col name="user.email" />
      <col name="user.phone" />
    </colgroup>
  </table>
  <button>derpdiederp</button>
  <paper-button>derp</paper-button>
</vaadin-grid> -->
<iron-ajax url="https://randomuser.me/api?results=100&inc=name,email,picture" last-response="{{users}}" auto></iron-ajax>
    <vaadin-grid id="grid" items="[[users.results]]">
      <vaadin-grid-selection-column auto-select="[[autoSelect]]"></vaadin-grid-selection-column>
      <vaadin-grid-column width="50px" flex-grow="0">
        <template class="header">#</template>
        <template>[[index]]</template>
      </vaadin-grid-column>
      <vaadin-grid-column width="50px" flex-grow="0">
        <template class="header"></template>
        <template>
          <img src="[[item.picture.thumbnail]]"></img>
        </template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">First Name</template>
        <template>
          <div class="capitalized">[[item.name.first]]</div>
        </template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">Last Name</template>
        <template>
          <div class="capitalized">[[item.name.last]]</div>
        </template>
      </vaadin-grid-column>
      <vaadin-grid-column>
        <template class="header">Custom Selection</template>
        <template>
        <div style="display: flex; align-items: center">
          <paper-button raised on-tap="_deselect" hidden="[[!selected]]">Deselect</paper-button>
          <paper-button raised on-tap="_select" hidden="[[selected]]">Select</paper-button>
          <paper-checkbox checked="{{selected}}">Selected</paper-checkbox>
        </div>
        </template>
      </vaadin-grid-column>
    </vaadin-grid>
<paper-button on-tap="myAfmelden">Afmelden</paper-button>
</template>

<iron-ajax
id="ajax_my_afmelden"
method="POST"
url="/cgi-bin/gerecht-toevoegen.py"
handle-as="json"
on-response="myAfmelden_ResponseHandler">
</iron-ajax>

</template>

<script>
  var grid = document.getElementById('afmelden-grid');
  grid.items = window.employees;

  // Log selected designers list on select event
  grid.addEventListener('selected-items-changed', function() {
    console.log('Selected designers:');
    gridData.selection.selected(function(index) {
      var data = window.employees[index];
        console.log('- ' + data[0] + ' ' + data[1]);

    });
  }.bind(grid));
</script>

  <script>
    Polymer({
      is: 'my-afmelden-test',

      properties: {
        gridData: {
          type: Array,           /* array<student-info>: student-info = {id, firstName, lastName, sameGroup}
                  array is constant groepnr is changable */
        },
      },

      myAfmelden: function() {
        // console.log(Selected);
        console.log("nu moet die komen...");
        this.$.ajax_my_afmelden.contentType="application/json"
        this.$.ajax_my_afmelden.body={
          users: this.gridData[0]
        };
        this.$.ajax_my_afmelden.generateRequest();
        console.log("Afmelden: " + this.gridData[0]);
        // console.log('Selected: ' + this.selection.selected());
        // console.log('- ' + data[0] + ' ' + data[1]);
      },
      myAfmelden_ResponseHandler:function(request_confirm) {
        console.log("Response: " + request_confirm);
      }
    });
  </script>
</dom-module>

Answer 1

只需绑定到

<vaadin-grid>

s

selected-items

属性并将数组导出为您认为合适的 JSON、CSV。 https://jsfiddle.net/gdagvsj6/1/