ngx-datatable - редактирование ячейки и вызов новой кнопки для сохранения изменений - PullRequest
Новая
       8

ngx-datatable - редактирование ячейки и вызов новой кнопки для сохранения изменений

0 голосов
/ 24 августа 2018

Я использую ngx-datatable для создания списка элементов настроек, которые можно редактировать, добавлять и удалять из.То, что я хочу сделать, это иметь строку данных с кнопкой «Редактировать» в конце строки.Когда я нажимаю кнопку редактирования, ячейка становится редактируемой, и в конце строки появляются кнопки «Сохранить» и «Отмена», а кнопка редактирования исчезает.Затем, когда вы нажимаете кнопку «Сохранить» или «Отмена», ячейка перестает редактироваться, и кнопка редактирования снова появляется в строке.Я пытаюсь использовать метод для обработки редактирования и переключения на кнопки «Сохранить» и «Отмена».

Мой HTML без метода выглядит следующим образом: 

<ng-template let-value="value" let-rowIndex="rowIndex" ngx-datatable-cell-template>
    <span class="mobile-hidden button-spacing">
        <button ion-button small *ngIf="editing != rowIndex" (click)="editing[rowIndex + '-name'] = true">Edit</button>
        <button ion-button small *ngIf="editing === rowIndex" (click)="updateValue($event, 'name', rowIndex)">Save</button>
        <button ion-button outline small *ngIf="editing === rowIndex">Cancel</button>
    </span>
</ng-template>

С этим HTML,когда я нажимаю «Изменить», ячейка «Имя» становится редактируемой.В настоящее время я должен убрать вкладку или нажать на другую область таблицы, чтобы сделать ячейку недоступной для редактирования.И когда я редактирую ячейку, кнопка «Редактировать» остается на экране, и не появляются ни кнопки «Сохранить», ни «Отмена».

Я пытаюсь использовать метод с кнопкой «Редактировать» вместо того, чтобы вызватьКнопки Сохранить и Отменить.Новая строка выглядит следующим образом: 

<button ion-button small *ngIf="editing != rowIndex" (click)="storeOldValues(rowIndex)">Edit</button>

Затем я создаю функцию в файле TypeScript: 

storeOldValues(rowIndex) {
    this.nameOld = this.rows[rowIndex].name;
    this.editing[rowIndex + '-name'] = true;
    this.editing = rowIndex;
}

При использовании этого метода кнопки «Сохранить» и «Отмена» появляются, когда я нажимаюна Edit (третья строка метода), но я не могу на самом деле редактировать ячейку.Казалось бы, проблема состоит в том, чтобы использовать и вторую, и в третью строки метода вместе, потому что, когда я закомментирую третью строку, ячейка снова редактируется, но кнопки «Сохранить» и «Отмена» не отображаются.

Iполучил вторую строку метода из демонстрационного кода ngx-datatable, но я не совсем понимаю, как он работает.Мне интересно, если это одна из причин, почему я не могу заставить код работать.В частности, как работает "rowIndex + '-name'"?Похоже, что это просто объединит буквальное слово "-name" в rowIndex, но я уверен, что это не то, что он делает.Как это делает ячейку имени редактируемой?Какова цель знака минус перед именем?И есть ли лучший способ сделать то, что я пытаюсь сделать?

Спасибо!

1 Ответ

0 голосов
/ 24 октября 2018

Я искал что-то, связанное с вашим вопросом, и сделал это демо .

В таблице есть значок карандаша для включения режима редактирования в одной строке. После включения появятся 2 иконки (сохранить / удалить). Обратите внимание, что в моем случае мне не нужно редактировать по двойному клику.

Надеюсь, это поможет вам.

...