[英]Select `vaadin-grid` Row Data with Button
<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>
您可以通过获取行索引并从数据源中选择行来通过按钮选择行数据。
<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
}
将一个按钮放在一个单元格模板中,为将项目作为参数接收的单击侦听器绑定。 这与聚合物数据绑定最容易做到。 然后将该项目添加到侦听器回调中的grid.selectedItems
数组中。
<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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.