如何在制表符单元中实现multiselect select2

问题描述

我正在使用tabultor.js加载数据。我需要在每个单元格内为特定列实施jquery select2 multi select。欢迎使用示例数据的任何工作示例。帮助我解决此问题。

下面我尝试过使用自定义编辑器，但无法正常工作。请帮助我。

https://jsfiddle.net/harifrais/gyobsk53/3/

test

解决方法

您的示例有两个问题。

第一个问题是您没有将select2库导入JSFiddle。您可以在控制台上看到它，上面写着

未捕获的TypeError：$（...）。select2不是函数

编辑器中有两个实际错误。首先是您要尝试通过ID引用元素，您不应该在virtualDOM环境中执行此操作，您应该将编辑器直接传递到jQuery选择器中

$(editor).select2({ //Pass the editor variable straight into the jQuery selector,no need for ID
    closeOnSelect: false,data:colorsToAccessSelect,});

第二个问题是您试图在元素添加到DOM之前实例化select2，这将导致库失败。

您需要确保在 onRendered 回调中实例化该回调，该回调在将编辑器添加到DOM并可见后调用。

onRendered(function(){      
    $(editor).select2({
        closeOnSelect: false,});
  
    editor.focus();
});

顺便提一句，制表器已经内置了Select Editor。性别列中的Editor Example中有演示的示例

例如，要在列上设置多选，请在定义中将 编辑器 设置为“选择”，然后设置 editorParams 和 multiselect 选项

{title:"Example",field:"example",editor:"select",editorParams:{multiselect:true}},

javascript jquery-select2 tabulator