Блог

Я использую редактируемые таблицы Mindmup.

Я бы хотел, чтобы последний столбец не был доступен для редактирования (потому что в моем случае это кнопка для удаления строки).

Могу ли я сделать это с помощью этой библиотеки?

В настоящее время эта функция не поддерживается.

Но быстрое решение заключается в следующем (на основе этой проблемы):

Измените строку 113 плагина с этого:

 element.find('td').prop('tabindex', 1);
  

К этому:

 element.find('td[data-editable!="false"]').prop('tabindex', 1);
  

И в вашей таблице сделайте соответствующие столбцы недоступными для редактирования следующим образом:

 <tr data-id=123">

  <td data-colname="first_name"
  >Chuck</td>

  <td data-colname="last_name"
  >Norris</td>

  <td data-editable="false"> <!-- data-editable added here -->
    <button type="button" class="btn">
      <i class="ti-close" aria-hidden="true"></i> Remove
    </button>
  </td>

</tr>
  

Примечание: странное форматирование td тегов является преднамеренным: таким образом, редактируемая вставка не вставляет пробелы при редактировании ячейки.

Обновить строку 92 в mindmup-editabletable.js чтобы:

  $('.someClass').on('click keypress dblclick focus', showEditor)  

Обновить строку 114 в mindmup-editabletable.js чтобы:

 element.find('.someClass').prop('tabindex', 1);  

Теперь примените class=»SomeClass» к каждому из элементов, которые вы хотите иметь возможность редактировать в своей таблице.

Кроме того, чтобы убрать пробелы в ячейках таблицы, вы можете изменить строку 18 mindmup-editabletable.js быть:

                     editor.val(active.text().trim())  

замените строку 16 (в функции showEditor):

 active = element.find('td:focus');
  

с помощью этого кода

                 active = element.find('td:focus').filter(function(){
                    var  i= -1;
                    var elem = this;
                    do {  i} while((elem=elem.previousSibling)!=null);
                    return !(activeOptions.disableColumnNumbers.indexOf(i) > -1);
                });
  

и тогда вы сможете объявить свой редактор, используя опцию disableColumnNumbers следующим образом

 $("selector...").editableTableWidget({disableColumnNumbers: [0,2,3,4,5,6,7,8,9,10,11,12]});
  

удачи, приятель