Question

根据示例here和文档here，我试图使用制表符创建“响应式布局折叠列表”。

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

有没有一种方法可以使列自动折叠？意思是，用户不必手动减小表的宽度即可折叠列-列已在加载时折叠，具有立即展开和折叠折叠列表的功能，而无需执行其他操作用户。

我尝试过：

以编程方式进行table.hideColumn("column_name_here");。
为我要自动折叠的每一列设置visible: false。
CSS display: none。
将表格的宽度CSS手动设置为我要折叠的列将可以完成的操作，而无需我以后再调整表格的宽度。这是可行的，但是我认为这是最好，最安全的解决方案，需要太多的猜测和愚弄。
responsiveLayoutCollapseFormatter（诚然，我不完全理解为此示例提供的示例）

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

Datatables Example

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

在制表器中有与之等效的东西吗？我一直在绞尽脑汁想办法解决这个问题。谢谢！

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

有没有一种方法可以自动折叠响应式布局折叠列表的特定列？

1 个答案:

使用切换按钮