Выберите данные строки `vaadin-grid` с помощью кнопки - PullRequest
Новая
       23

Выберите данные строки `vaadin-grid` с помощью кнопки

0 голосов
/ 04 июня 2018 
<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">

  <vaadin-grid-column>
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>

  <vaadin-grid-column>
    <template class="header">First Name</template>
    <template>[[item.name.first]]</template>
  </vaadin-grid-column>
</vaadin-grid>

С помощью шаблона activeItem можно выбрать данные строки vaadin-grid при щелчке по строке.

Есть ли способ вызвать это с помощью действия кнопки?

Возможно, выбрав свойство из родительского узла? 

<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">

  <vaadin-grid-column>
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>

  <vaadin-grid-column>
    <template class="header">First Name</template>
    <template><paper-button on-tap="selectRowData">Select</paper-button</template>
  </vaadin-grid-column>
</vaadin-grid>

Ответы [ 3 ]

0 голосов
/ 04 июня 2018

Вы можете выбрать данные строки с помощью кнопки, получив индекс строки и выбрав строку из источника данных. 

<vaadin-grid id="grid" items="[[data]]" active-item="{{activeItem}}">
  <vaadin-grid-column>
    <template class="header">#</template>
    <template>[[index]]</template>
  </vaadin-grid-column>

 <vaadin-grid-column>
   <template class="header">First Name</template>
   <template>
     <paper-button id="[[index]] on-tap="selectRowData">Select</paper-button</template>
   </vaadin-grid-column>
 </vaadin-grid>

... 

selectRowData(e) {
  let row = this.data[e.detail.sourceEvent.target.id];
  // do something with row data
}
0 голосов
/ 14 июня 2018 
<vaadin-grid-column width="14em">
 <template>
   <vaadin-button on-click="deleteUser" >
     <iron-icon icon="icons:delete" ></iron-icon>
   </vaadin-button>              
 </template>

// Вам не нужно определять какую-либо модель, она просто доступна 

deleteUser(e)
{
   let row=e.model.item;
   console.log(row);
   // e.g. make a REST Delete Operation with iron-ajax
   this.$.ajaxUserModify.url=this.dataURL+"/"+row.id;
   this.$.ajaxUserModify.method="delete";
   this.$.ajaxUserModify.body="";
   this.$.ajaxUserModify.generateRequest();
}
0 голосов
/ 04 июня 2018

Поместите кнопку в один из шаблонов ячеек, свяжите прослушиватель щелчков для того, кто получает элемент в качестве параметра.Это проще всего сделать с привязкой данных Polymer.Затем добавьте элемент в массив grid.selectedItems обратного вызова слушателя.

...