VAADIN-GRID V2和聚合物添加網格的詳細

我開始與聚合物入門-kit和Vaadin柵V2-βVAADIN-GRID V2和聚合物添加網格的詳細

我能得到這個代碼來顯示，但是具有顯示行細節麻煩。我喜歡去的外觀效果： 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>

來源

2017-03-02 IrishGringo

你需要兩樣東西：

首先，添加模板與細節內容

<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

來源

2017-03-02 08:21:51

VAADIN-GRID V2和聚合物添加網格的詳細

回答

相關問題