Выбор строки в Vaadin Grid - PullRequest
Новая
       15

Выбор строки в Vaadin Grid

0 голосов
/ 23 мая 2018

Я использую компонент сетки vaadin для отображения, редактирования и удаления записи в таблице.Я использую ввод html в строках сетки vaadin для хранения текста и переключения между режимами чтения и редактирования в зависимости от того, редактирует ли пользователь строку.Код выглядит следующим образом: 

<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 input) сетка не будет регистрировать изменения в выборе, однако, если они нажмут на синюю часть, она будет регистрироваться.Есть ли обходной путь для этого?Могу ли я что-нибудь добавить в тег ввода, чтобы убедиться, что строка выбрана правильно?

TIA

Ответы [ 2 ]

0 голосов
/ 25 мая 2018

Если вам не нужно позволять пользователю выбирать текст, когда он только для чтения, вы можете добавить pointer-events: none; для входных данных, когда они только для чтения.

Вы также можете добавить элемент открытого текста в дополнениек элементу <input>, который вы показываете выборочно в зависимости от состояния только для чтения.

0 голосов
/ 23 мая 2018

Если у вас есть дочерний элемент в строке vaadin-grid, который будет захватывать событие click, тогда выбор строки будет затронут.
Примечание из vaadin-grid демо selection -

Щелчок по дочернему элементу внутри ячейки активирует элемент, если только:

  • Дочерний элемент, по которому щелкают, является фокусируемым элементом, например, <input>, a <button> или имеет атрибут tabindex.
  • Дочерний объект, по которому щелкнули, предотвращает действие по умолчанию для события щелчка.
  • Дочерний объект, по которому щелкнули, останавливает распространение события click.

Так как вы планируете сделать дочерние элементы строки редактируемыми, один из способов добиться этогобудет программно выбирать строку на основе события click из дочернего элемента input.

, поэтому слегка обновленный псевдокод будет иметь вид - 

<!-- 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 здесь .

...