有没有办法自动折叠响应式布局折叠列表的特定列？

Question

我正在尝试使用 Tabulator 创建一个“响应式布局折叠列表”，根据示例 here 和文档 here。

示例的源代码似乎与示例本身不匹配，但根据我的理解和使用代码，随着表格的宽度减小，结果列被折叠，为每一行创建表格包含因缩小表格宽度而折叠的列的名称和值。在制表符示例的情况下，似乎在表格上设置了特定宽度，这迫使列折叠，因为额外的列不适合该宽度，但我想看看是否有是一种更好、更动态的方法。

有没有办法让列自动折叠？这意味着，用户不必手动减小表格的宽度以使列折叠 - 列将在加载时折叠，能够立即展开和折叠折叠的列表而无需进一步操作用户。

我试过了：

• 以编程方式执行table.hideColumn("column_name_here");。

• 为我想要自动折叠的每一列设置visible: false。

• CSS display: none 用于我想要自动折叠的每一列。

• 手动将表格的宽度 CSS 设置为我想要折叠的列可以这样做，而无需我在之后调整表格宽度。这...有效，但它需要太多的猜测和鬼混让我认为这是最好和最安全的解决方案。

• responsiveLayoutCollapseFormatter（诚然，我不完全理解为此给出的示例）

举个例子，一个队友正在为他们网站上的表格使用 Datatables 库，他们能够将className: 'none' 传递到他们希望在页面上自动折叠的每个列的列对象中，并且它确实会自动将这些列折叠成一个可扩展的列名和值表，而无需执行任何其他操作：

Datatables Example

从上面的示例中，“消息”、“别名”、“类型”、“队列”和“技能”列的列对象中都有 className: none，而其余列没有； className: none 会导致这些列自动折叠，从而将它们放入折叠的表格列表中，而无需手动设置宽度或在页面上手动调整宽度。

Tabulator 中是否有这样的等价物？我一直在绞尽脑汁想弄清楚这一点。谢谢！

Answer 1

响应式折叠格式化程序的要点是折叠由于宽度不足而不再适合表格的行，它可以在较小的屏幕尺寸上启用响应式布局。没有办法强制它提前折叠行，因为它会根据桌子上的可用水平空间折叠它们。

话虽如此，如果您只想在列下显示一些值，使用 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;
    },
});

有关行格式化程序的更多详细信息，请查看Format Documentation

您可以使用 rowFormatter 对行布局进行大量更改，Row Formatter Example 演示了一个极端情况，您可以在需要时将列全部替换

带切换按钮

如果你想要一个类似于折叠格式化程序的切换按钮，那么你需要做两件事，在行数据中存储对列表元素的引用，并定义一个格式化程序以添加到切换列。

//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
    ]
});