时间戳

首页 > 解决方案 > 如何让 Tabulator 使用 Select2 标头过滤器？

javascript - 如何让 Tabulator 使用 Select2 标头过滤器？

问题描述

按照此处的示例，我们已经尝试了一个多星期来让 Tabulator 使用 Select2 标题过滤器。这里有一个 JS Fiddle ，里面有所有的部分。似乎 Tabulator 过滤器（实际上只是编辑器）onRendered() 函数甚至没有被调用，因为我们在其中的控制台日志从未被记录。

选择元素本身显示在标题过滤器中，但从未应用 Select2 对象（可能是因为似乎甚至没有调用 onRendered）。如果我们将 Select2 对象放在 onRendered 函数之外，它会被应用，但在选择完成后过滤器不会被应用。没有控制台或其他错误，我们已经按照 Tabulator 的“示例”进行了操作，因此我们不确定接下来要尝试什么。

有谁知道如何使用 Tabulator 获得基本的 Select2 标头过滤器？

var tableData = [{
    id: "1",
    topic: "1.1"
  },
  {
    id: "2",
    topic: "2.2"
  },
];

var select2Editor = function(cell, onRendered, success, cancel, editorParams) {
  var editor = document.createElement("select");
  var selData = [{
    id: '1.1',
    text: "One"
  }, {
    id: "2.2",
    text: "Two"
  }, {
    id: "3.3",
    text: "Three"
  }, ];

  onRendered(function() {
    // TODO: map tracks to id and text
    console.log('rendered');

    $(editor).select2({
      data: selData,
      minimumResultsForSearch: Infinity,
      width: '100%',
      minimumInputLength: 0,
      //allowClear: true,
    });
    
    $(editor).on('change', function(e) {
      success($(editor).val());
    });


    $(editor).on('blur', function(e) {
      cancel();
    });

  });


  return editor
};


var columns = [{
  title: "ID",
  field: "id"
}, {
  title: "Topic",
  field: "topic",
  headerFilter: select2Editor,
}, ];


var table = new Tabulator("#table", {
  placeholder: "No Data Found.",
  layout: "fitData",
  data: tableData,
  columns: columns,
});

标签： javascriptjquery-select2tabulator

解决方案

我是 Tabulator 和 select2 的新手，我认为这可能是一种不好的方法，但它似乎可以正常工作。

如果您想将 select2 与文本输入元素一起使用，看起来您需要使用完整的包。

https://jsfiddle.net/dku41pjy/

var tableData = [{
    id: "1",
    topic: "1.1"
  },
  {
    id: "2",
    topic: "2.2"
  },
];

var columns = [{
  title: "ID",
  field: "id"
}, {
  title: "Topic",
  field: "topic",
  headerFilter: 'select2Editor'
}, ];

var awaiting_render = [];

function do_render({ editor, cell, success, cancel, editorParams }) {
  console.log('possibly dodgy onrender');
    var selData = [{
    id: '',
    text: "-- All Topics --"
  }, {
    id: '1.1',
    text: "One"
  }, {
    id: "2.2",
    text: "Two"
  }, {
    id: "3.3",
    text: "Three"
  }, ];
  
  $(editor).select2({
    data: selData,
    //allowClear: true,
  });

  $(editor).on('change', function(e) {
    console.log('chaaaange')
    success($(editor).val());
  });


  $(editor).on('blur', function(e) {
    cancel();
  });
      
}
function render_awaiting() {
    var to_render = awaiting_render.shift();
  do_render(to_render);
  if(awaiting_render.length > 0)
    render_awaiting();
}

Tabulator.prototype.extendModule("edit", "editors", {
    select2Editor:function(cell, onRendered, success, cancel, editorParams) {
      console.log(cell);
      var editor = document.createElement("input");
      editor.type = 'text';
      awaiting_render.push({ editor, cell, success, cancel, editorParams });

      return editor
    },
});

var table = new Tabulator("#table", {
  placeholder: "No Data Found.",
  layout: "fitData",
  data: tableData,
  columns: columns,
  tableBuilt:function(){
    render_awaiting();
  },
});

编辑：我怀疑只有在单元格中使用这些编辑元素时才会触发 onRendered，以便在仅显示数据和显示可编辑字段之间进行转换。

推荐阅读