табулятор, добавляющий элемент в столбцы и выполняющий действие

#javascript #jquery #tabulator

#javascript #jquery #табулятор

Вопрос:

У меня очень серьезная проблема при работе с плагином Tabulator. У меня есть столбец, который содержит заголовок.Теперь я хочу иметь еще один столбец, чтобы поместить в него 3 кнопки.

  1. Одна <a> кнопка тега для перехода по ссылке.
  2. Одна кнопка для редактирования; Я хочу показать мне модал и вызвать ajax.
  3. У меня уже есть плагин кнопки переключения.Я не знаю, как я могу добавить его в этот столбец и активировать его.
  • Я не смог найти свой ответ в документах табулятора.

Комментарии:

1. Для ясности эта группировка кнопок будет повторяться для каждой строки, правильно? Если да, то почему бы не три столбца, каждый со своим собственным виджетом?

Ответ №1:

Вам нужно будет использовать пользовательский форматировщик.

Вы начинаете с определения функции форматирования ячеек, которая в этом случае создаст элементы button (вы можете добавить другие функциональные возможности здесь, чтобы настроить содержимое / внешний вид кнопок), добавьте несколько прослушивателей событий для обработки нажатых кнопок, затем добавьте их в ячейку

 function buttonFormatter(cell){
    var cellEl = cell.getElement(); //get cell DOM element

    // create elements
    var linkBut document.createElement("button");
    var edtiBut document.createElement("button");
    var otherBut document.createElement("button");

    //add event bindings
    linkBut.addEventListener("click", function(e){
        //do something when link button clicked
    });

    //add buttons to cell
    cellEl.appendChild(linkBut);
    cellEl.appendChild(edtiBut);
    cellEl.appendChild(otherBut);
}
  

Затем вы привязываете функцию форматирования к столбцу, используя свойство formatter в определении столбца:

    {title:"buttons", formatter:buttonFormatter),
  

Полную информацию об использовании пользовательских форматеров можно найти в документации по форматированию