VAADIN-GRID V2 和 POLYMER 添加网格细节答案

【问题标题】：VAADIN-GRID V2 and POLYMER Adding Grid-DetailVAADIN-GRID V2 和 POLYMER 添加网格细节
【发布时间】：2017-03-02 05:20:21
【问题描述】：

我从 Polymer Starter-kit 和 Vaadin-grid V2-beta 开始

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

我从示例中获取的这段代码及其工作。有人可以标记一下并添加细节如何完成吗

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

【问题讨论】：

标签： polymer vaadin-grid

【解决方案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

【讨论】：