Изменить X-редактируемые шаблоны для каждого элемента (не глобально) - PullRequest
Новая
       20

Изменить X-редактируемые шаблоны для каждого элемента (не глобально)

1 голос
/ 14 апреля 2019

Я добавил кнопку удаления в форму X-editable , используя следующий скрипт ( live demo ).

Как это можно сделать только для некоторых элементов(т.е. .editable-with-delete), а не глобально?

enter image description here

$('.editable').editable();

$.fn.editableform.buttons += '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>';

$('.editable-with-delete').editable();


$("#list").on("click", "i.glyphicon-trash", function() {
  console.log('delete')
});

<h4>X-editable: display checklist as UL</h4>
<ul id='list'>
  <li class='editable-with-delete'>Editable element with delete</li>
  <li class='editable'>Editable element without delete</li>
  <li class='editable'>Editable element without delete</li>
</ul>

Ответы [ 2 ]

2 голосов
/ 18 апреля 2019

Благодаря функциям, предлагаемым в настоящее время библиотекой X-editable, я не вижу способа сделать то, что вы хотите, просто установив параметры для ваших редактируемых файлов.

Однако вы можете сделать это, прослушав событие shown и добавив кнопку в обработчик событий. Вот пример: 

$('.editable').editable();

$(".editable-with-delete")
  .on("shown", function(ev, editable) {
    const buttons = editable.container.$form.find(".editable-buttons")[0];
    buttons.insertAdjacentHTML("beforeend", '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>')
  })
  .editable();

$("#list").on("click", ".editable-delete", function() {
  console.log('delete')
});

В идеале, в моих собственных приложениях я бы предпочел, чтобы кнопки добавлялись до показа всплывающего окна, но я не вижу способа сделать это с помощью открытого API библиотеки, как она существует сейчас. Во всяком случае, с оптимизацией перекомпоновки, выполняемой браузерами в наши дни, я сомневаюсь, что добавление кнопки в обработчик shown заметно повлияет на взаимодействие с пользователем.

Вот модифицированная скрипка: https://jsfiddle.net/kuqjtdar/3/

0 голосов
/ 14 апреля 2019

Не самое элегантное решение, но вы можете добавить кнопку удаления с помощью отдельного события щелчка и сбросить HTML, когда удаление не требуется.См. Фрагмент кода ниже. 

$('#list').editable();

$('#list').on('click', '.editable',  ()=> resetButtons());

$('#list').on('click', '.editable-with-delete', ()=> { 
resetButtons();
$.fn.editableform.buttons += '<button type="button" class="btn btn-default btn-sm editable-delete"><i class="glyphicon glyphicon-trash"></i></button>';
});

function resetButtons() {
$.fn.editableform.buttons = '<button type="submit" class="btn btn-primary btn-sm editable-submit"><i class="glyphicon glyphicon-ok"></i></button><button type="button" class="btn btn-default btn-sm editable-cancel"><i class="glyphicon glyphicon-remove"></i></button>';
}
...