Блог

Я пытаюсь использовать Tabulator для создания «Списка свернутого адаптивного макета», согласно примеру здесь, и документации здесь.

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

Есть ли способ заставить столбцы автоматически сворачиваться? Это означает, что пользователю не придется вручную уменьшать ширину таблицы, чтобы свернуть столбцы — столбцы уже будут свернуты при загрузке, с возможностью немедленного развертывания и сворачивания свернутого списка без каких-либо дополнительных действий, необходимых от пользователя.

Я пробовал:

• Делаем table.hideColumn("column_name_here"); программно.

• Настройка visible: false для каждого столбца, который я хотел автоматически свернуть.

• CSS display: none для каждого столбца, который я хотел автоматически свернуть.

• Ручная настройка ширины CSS таблицы так, чтобы столбцы, которые я хотел свернуть, делали это без необходимости корректировать ширину таблицы после. Это … сработало, но мне потребовалось слишком много догадок и дурачиться, чтобы я подумал, что это лучшее и безопасное решение.

• responsiveLayoutCollapseFormatter (по общему признанию, я не до конца понимаю пример, который был приведен для этого)

Просто в качестве примера, товарищ по команде использует библиотеку Datatables для таблицы на своем веб-сайте, и они смогли передать className: 'none' в объекты столбцов каждого из столбцов, которые они хотели автоматически свернуть на странице, и это действительно автоматически сворачивает эти столбцы в расширяемую таблицу имен столбцов и значений без необходимости делать что-либо еще:

Пример таблиц данных

Из приведенного выше примера все столбцы «Сообщение», «Псевдонимы», «Тип», «Очередь» и «Навык» имеют className: none в своих объектах столбца, в то время как остальные столбцы этого не делают; className: none приводит к автоматическому сворачиванию этих столбцов, что позволяет поместить их в список свернутых таблиц без необходимости устанавливать ширину вручную или настраивать ширину вручную на странице.

Есть ли эквивалент этого в Tabulator? Я ломал голову, пытаясь разобраться в этом. Спасибо!

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

При этом очень легко имитировать его эффект в таблице с помощью rowFormatter, если вы просто хотите отобразить некоторые значения под столбцами

 var table = new Tabulator("#example-table", {
    rowFormatter:function(row){
        //row - row component

        //define holder elements
        var listHolder = document.createElement("div");
        var list = document.createElement("table");

        //retrieve row data
        var data = row.getData();
        
        ///add each columns data to the list
        listContents  = "<tr><td><strong>Name</strong></td><td>"   data.name   "</td></tr>";
        listContents  = "<tr><td><strong>Age</strong></td><td>"   data.age   "</td></tr>";
        
        //add contents to list
        list.innerHTML = listContents;
        listHolder.appendChild(list);

       return listHolder;
    },
});
  

Для получения более подробной информации о форматировании строк ознакомьтесь с документацией по формату

Вы можете использовать rowFormatter для внесения обширных изменений в макет строки, пример Row Formatter демонстрирует крайний случай, когда вы можете заменить столбцы все вместе, если это необходимо

С помощью кнопки переключения

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

 //define toggle formatter
var toggleFormatter = function(cell){
    var toggleEl = document.createElement("button"); // create your toggle button
    

    toggleEl.addEventListener("click", function(){
        var listHolder= cell.getData().listHolder; //lookup list element from row data
         listHolder.style.display = listHolder.style.display ? "none" : ""; //toggle the display property on the list element
    });
}

var table = new Tabulator("#example-table", {
    rowFormatter:function(row){
        //row - row component

        //define holder elements
        var listHolder = document.createElement("div");
        var data = row.getData();

        // CREATE TABLE AS PER ABOVE EXAMPLE
        
        // store the list element on the row data (without triggering an update)
        data.listHolder = listHolder;
 
       return listHolder;
    },
    columns:[
        //define toggle column
        {formatter:toggleFormatter, width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false},
        //...other columns
    ]
});