在 Vaadin 网格中选择行答案

【问题标题】：Selecting Row in Vaadin Grid在 Vaadin 网格中选择行
【发布时间】：2018-05-23 15:44:49
【问题描述】：

我正在使用 vaadin 网格组件来显示、编辑和删除表格中的记录。我在我的 vaadin 网格行中使用 html 输入来保存文本并在只读和可编辑之间切换，具体取决于用户是否正在编辑该行。代码如下所示：

<vaadin-grid-column width="50%">
  <template class="header">
    Description
  </template>
  <template>
    <input id="desc" class="input-row" value="[[item.Description]]" on-input="_storeDesc" readonly$="[[!_isEditing(editing, item)]]"></input>
  </template>
</vaadin-grid-column>

我遇到的问题是我想在 vaadin 网格中启用行选择。当我启用它时，该行仅在用户单击不包含 html 输入的行的一部分时注册为选中状态。如果用户单击输入，网格将不会记录活动项已更改。

如果用户单击白色部分（html 输入），网格将不会注册选择更改，但是如果他们单击蓝色部分，它将注册。有解决方法吗？有什么我可以放在输入标签上以确保正确选择行吗？

TIA

【问题讨论】：

标签： javascript polymer vaadin

【解决方案1】：

如果您在 vaadin-grid 行中有一个将捕获 click 事件的子元素，则行选择将受到影响。
来自vaadin-grid 演示 selection 的注释 -

单击单元格内的子元素会激活该项目，除非要么：

点击的子元素是可聚焦元素，例如<input>， <button>，或具有 tabindex 属性。

被点击的孩子阻止了点击事件的默认动作。

被点击的孩子停止传播点击事件。

由于您计划使行子元素可编辑，因此实现此目的的一种方法是根据 input 子元素中的 click 事件以编程方式选择行。

所以稍微更新的伪代码将是 -

<!-- template code -->
<vaadin-grid-column width="50%" active-item="{{_activeItem}}">
  <template class="header">
    Description
  </template>
  <template>
    <input id="desc" class="input-row" value="[[item.Description]]" item="[[item]]" on-click="_inputClicked" on-input="_storeDesc" readonly$="[[!_isEditing(editing, item)]]"></input>
  </template>
</vaadin-grid-column>

//set the row selected in which the input was clicked for editing
_inputClicked(e) {
  const item = e.currentTarget.item;
  this.$.dataGrid.selectedItems = item ? [item] : [];
}

请注意，input 元素必须引用 item 才能以编程方式设置行选择。

您可以查看更多vaadin-grid选择模式here的示例。

【讨论】：

【解决方案2】：

如果您不需要让用户在只读时选择文本，您可以在输入为只读时添加pointer-events: none;。

除了<input> 元素之外，您还可以有一个纯文本元素，您可以根据只读状态选择性地显示它。

【讨论】：