Question

我正在使用tabulator library来绘制表格，并选择 autoColumns：true 作为选项，因为列是动态的，可以正常工作，但是我还想为每列添加标题过滤器，我已经参考了文档，但无法解决。下面是代码，

init: function() {
      var _this = this;
      this.tabulator = new Tabulator("#example", {
        autoColumns:true,
        height:"500px",
        movableColumns: true,
        ajaxProgressiveLoad:"scroll",
        paginationSize:20,
        ajaxProgressiveLoadScrollMargin: 400,
        ajaxLoader: true,
        ajaxLoaderLoading: 'updating data',
        ajaxProgressiveLoadDelay: 200,
        ajaxResponse:function(url, params, response){  
          return {last_page: _this.iTotalPage, data: response}; 
        }
      });
     this.setData(); 
},

setData: function() {
  this.tabulator.setData("/tableData", {searchValue: this.sSerachValue});
},

是否有任何方法可以添加标题过滤器，而无需通过（this.tabulator.getColumns（））选择列并映射每个过滤器以设置过滤器功能？

Answer 1

我不知道这是否可以满足您的需求...
无论如何，只要使用这个很棒的库（我最近发现的）的方法就可以了。

    // here your starting code...

        this.setData();
        this.setHeaders();
    },
    setData: function() {
        this.tabulator.setData(tableData, {});
    },
    setHeaders: function() {
        var columns = this.tabulator.getColumnDefinitions();

        // basic code to adapt to your need
        columns.forEach(column => {
            column.headerFilter = "input";
        });

        this.tabulator.setColumns(columns);
    }

或者在通过按钮构建表格以触发此操作之后

document.getElementById('setHeaders').onclick = function(e) {
    var columns = object.tabulator.getColumnDefinitions();

    columns.forEach(column => {
        column.headerFilter = "input";
    });

    object.tabulator.setColumns(columns);
}

如何使用autoColumns添加标题过滤器？

1 个答案: