在 Vaadin 网格中选择行

Question

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

<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

Answer 1

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

Clicking a child element inside a cell activates the item, unless either:

The clicked child is a focusable element, for example, an <input>, a <button>, or has the tabindex attribute.

The clicked child prevents default action of the click event.

The clicked child stops propagation of the click event.

由于您打算使行子元素可编辑，实现这一目标的一种方法是根据 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。

Answer 2

如果您不需要允许用户 select 只读文本，您可以为只读输入添加 pointer-events: none;。

除了 <input> 元素之外，您还可以有一个明文元素，根据只读状态 select 显示

。

在 Vaadin 网格中选择行

Selecting Row in Vaadin Grid

javascript

vaadin

polymer