Question

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

我可以显示此代码，但无法显示Row详细信息。我想要的效果如下： 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>

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

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

1 个答案: