VAADIN-GRID V2和聚合物添加网格-细节

Question

我开始学习聚合物初学者工具包和Vaadin-grid V2-beta

我可以显示此代码，但无法显示行的详细信息。我想要的效果看起来像这样：https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/other.html行细节

这段代码是我从example中摘取的，它是有效的。有没有人能在这上面加个记号，再加上细节是怎么做的？

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

<dom-module id="my-view6">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <vaadin-grid items='[{"name": "John", "surname": "Lennon", "role": "singer"}, 
                          {"name": "Ringo", "surname": "Starr", "role": "drums"},
                          {"name": "John", "surname": "Lennon", "role": "singer"}, 
                          {"name": "Ringo", "surname": "Starr", "role": "drums"},
                          {"name": "John", "surname": "Lennon", "role": "singer"},
                          {"name": "John", "surname": "Lennon", "role": "singer"}, 
                          {"name": "Ringo", "surname": "Starr", "role": "drums"},
                          {"name": "John", "surname": "Lennon", "role": "singer"},
                          {"name": "Ringo", "surname": "Starr", "role": "drums"},
                          {"name": "John", "surname": "Lennon", "role": "singer"},                                              
                          {"name": "Ringo", "surname": "Starr", "role": "drums"}]'>

          <vaadin-grid-column-group>
            <vaadin-grid-column>
              <template class="header">Name</template>
              <template>[[item.name]]</template>
            </vaadin-grid-column>
            <vaadin-grid-column>
              <template class="header">Surname</template>
              <template>[[item.surname]]</template>
            </vaadin-grid-column>
          </vaadin-grid-column-group>

          <vaadin-grid-column>
            <template class="header">Role</template>
            <template>[[item.role]]</template>
          </vaadin-grid-column>
        </vaadin-grid>
      </template>

      <script>
        Polymer({
          is: 'my-view6',
        });
      </script>
    </dom-module>

Answer 1

你需要两样东西：

首先，添加一个包含详细内容的模板

<template class="row-details">
  <div>My Details</div>
</template>

其次，通过使用{{expanded}}变量、expandedItems属性或expandItem(item)和collapseItem(item) API来切换详细信息。

请参阅此处的示例：https://cdn.vaadin.com/vaadin-grid/2.0.0-alpha2/demo/#row-details