如何在制表器中创建/设置动态标题答案

【问题标题】：How to create/set dynamic headers in tabulator如何在制表器中创建/设置动态标题
【发布时间】：2019-11-18 11:29:47
【问题描述】：

我们如何设置动态标题名称。 is 是从 JSON 传递的。另外我想知道我们如何隐藏多个列，例如您有一个隐藏单个列的示例，但我想隐藏多个列，并且我希望在单击按钮时显示相同的多个列。

这些功能或问题与我们正在使用制表器开发的比较表相关，我想在其中比较多个特定列，并且我想隐藏我不想看到的列，如果我想再次显示它

【问题讨论】：

【解决方案1】：

Tabulator 具有根据行数据的属性名称自动生成列名称的选项。

您可以通过将 autoColumns 选项设置为 true 来启用此功能：

var table = new Tabulator("#example-table", {
    data:tabledata,
    autoColumns:true,
});

查看Autocolumns Example 以了解它的实际效果。

要隐藏多个列，您需要多次调用 hideColumn 或 showColumn 函数如果您愿意如果在此期间表格只重绘一次，那么您可以使用 blockRedraw 函数来防止重绘表格，直到更新完成：

table.blockRedraw(); //block table redrawing

table.hideColumn("name") //hide the "name" column
table.hideColumn("age") //hide the "age" column

table.restoreRedraw(); //restore table redrawing

【讨论】：

【解决方案2】：

为了隐藏列，您必须在表的声明中添加 visible:false 作为参数。

示例：

columns:[{title: "Test Column", field: "test", sorter:"number", width: 100,visible:false}]

为了隐藏/显示多列，首先必须确定要隐藏/取消隐藏的列

一个简单的方法是制作一个布尔状态的对象数组，例如：

var visibility =[];
visibility.push({col1_Status:true,col2_Status:true,col3_Status:false});

那么表的初始化将是这样的：

columns:[{title: "Test Col1", field: "test1", sorter:"number", width: 100,visible:visibility[0].col1_Status},
{title: "Test Col2", field: "test2", sorter:"number", width: 100,visible:visibility[0].col2_Status},
{title: "Test Col3", field: "test3", sorter:"number", width: 100,visible:visibility[0].col3_Status}]

现在您已准备好获取 Jason 数据并根据需要更改可见性。

上述过程也可以独立工作。任何时候您都可以访问多个数组值，更改它们的状态并重新更新制表符以隐藏/显示列。

您可以应用相同的方法与列名也改变title: 请注意，一旦在表内初始化列，就不能更改它。更改标题（也包括数据）的唯一方法是删除现有列并将其替换为另一个。

要做到这一点，请使用： table.deleteColumn("Column Name Here");

table.addColumn({title:"Name", field:"name"});

希望有帮助！

【讨论】：