Polymer 聚合物Vaadin网格v2迁移

我正在尝试将我的vaadin网格转换为v2，这样我就可以使用selectionMethods将所选行提取为json或csv

在我的工作v1 vaadin网格中，wich导入了一个json

导入文件中包含的导入：

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

my vaadin包含以下所有文件：

我正在使用的示例文件：

var grid=document.getElementById（'afmelden-grid'）；
grid.items=window.employees；
var数据=window.employees[索引]；
#
[[索引]]
名字
[[item.name.first]]
姓
[[item.name.last]]
自定义选择
取消选择
挑选
挑选出来的
阿夫梅尔登
var grid=document.getElementById（'afmelden-grid'）；
grid.items=window.employees；
//在选择事件上记录所选设计器列表
grid.addEventListener（'selected-items-changed'，function（）{
log（'selecteddesigners:'）；
gridData.selection.selected（函数（索引）{
var数据=window.employees[索引]；
console.log（'-'+数据[0]+''+数据[1]）；
});
}.bind（grid））；
聚合物({
是‘我的阿夫梅尔登测试’，
特性：{
网格数据：{
类型：Array，/*Array:student info={id，firstName，lastName，sameGroup}
数组是常量，而数组的值是可更改的*/
},
},
myAfmelden:function（）{
//console.log（选中）；
控制台日志（“nu moet die komen…”）；
这是$.ajax\u my\u afmelden.contentType=“application/json”
这个$.ajax\u my\u afmelden.body={
用户：this.gridData[0]
};
这是$.ajax\u my\u afmelden.generateRequest（）；
log（“Afmelden:+this.gridData[0]）；
//console.log（'Selected:'+this.selection.Selected（））；
//console.log（'-'+数据[0]+''+数据[1]）；
},
myAfmelden_响应管理员：功能（请求确认）{
控制台日志（“响应：+请求\确认）；
}
});

只需绑定到

s

所选项目

属性，并根据需要将数组导出为JSON、CSV

只需绑定到

s

所选项目

属性，并根据需要将数组导出为JSON、CSV

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