0

我从 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>
4

1 回答 1

0

你需要两件事：

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

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

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

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

于 2017-03-02T08:21:51.357 回答