在 Tabulator.js 列中通过搜索实现多选

Question

我目前正在使用 Tabulator.js 并尝试创建一个具有多选功能和搜索选项的列。我尝试使用 Select2 库来实现这一点，但遇到了一些问题。

这是我一直在使用的代码：

const tabledata = [
    {
        id: 1,
        name: "Oli Bob",
        select2: ['two', 'three']
    },
    {
        id: 2,
        name: "Mary May",
        select2: ['two']
    },
    {
        id: 3,
        name: "Christine Lobowski",
        select2: ['two']
    },
    {
        id: 4,
        name: "Brendon Philips",
        select2: ['two']
    },
    {
        id: 5,
        name: "Margret Marmajuke",
    },
];

const list = [
    {
        id: 'one',
        text: 'one'
    },
    {
        id: 'two',
        text: 'two'
    },
    {
        id: 'three',
        text: 'three'
    }
];

const select2Editor = function (cell, onRendered, success, cancel, editorParams) {
    const editor = document.createElement("select");


    onRendered(function () {
        const select_2 = $(editor);

        select_2.select2({
            data: list,
            width: '100%',
            multiple: true,
            minimumInputLength: 0,
        })

        if (typeof cell.getValue() == 'object') {
            const selectedValuesIds = cell.getValue().map(val => list.find(x => x.text == val).id)
            select_2.val(selectedValuesIds).trigger('change')
        }

        select_2.on('select2:select select2:unselect', () => {
            const data = select_2.select2('data')
            const cellValue = data.map(el => el.text)
            success(cellValue)
        });


        // $(editor).on('blur', () => cancel)

        editor.focus()
    });

    return editor;
};

const table = new Tabulator("#table", {
    // debugEventsExternal: true,
    // debugEventsInternal: true,
    height: "500px",
    data: tabledata,
    rowHeight: 32,
    columns: [
        {
            title: "Name",
            field: "name",
            width: 150
        },
        {
            title: "Select2",
            field: "select2",
            width: 300,
            editor: select2Editor,
        },
    ],
});

使用这段代码，我遇到了以下问题：

1. 要打开列表，我首先必须单击单元格以显示编辑器，然后再次单击以显示列表。这感觉很麻烦而且不直观。

2. 如果我在列表打开的情况下单击其他不可编辑的单元格，焦点不会消失。我尝试添加“$(editor).on('blur', () => cancel)”，但是列表根本没有打开，因为当列表打开时，焦点转移到 select2 元素并且编辑器关闭.

我想知道是否有一种更简单的方法来实现此功能，也许不需要使用额外的库，或者我当前使用 Select2 的方法是否缺少一些东西？任何帮助或指导将不胜感激。谢谢！

Answer 1

对于第一种情况，可以使用open方法。

open方法将导致下拉菜单打开，显示 可选择的选项

select_2.select2('open');

对于第二种情况，您可以使用 select2:close 事件。

下拉菜单关闭时触发

select_2.on('select2:select select2:unselect select2:close'

const tabledata = [
    {
        id: 1,
        name: "Oli Bob",
        select2: ['two', 'three']
    },
    {
        id: 2,
        name: "Mary May",
        select2: ['two']
    },
    {
        id: 3,
        name: "Christine Lobowski",
        select2: ['two']
    },
    {
        id: 4,
        name: "Brendon Philips",
        select2: ['two']
    },
    {
        id: 5,
        name: "Margret Marmajuke",
    },
];

const list = [
    {
        id: 'one',
        text: 'one'
    },
    {
        id: 'two',
        text: 'two'
    },
    {
        id: 'three',
        text: 'three'
    }
];

const select2Editor = function (cell, onRendered, success, cancel, editorParams) {
    const editor = document.createElement("select");


    onRendered(function () {
        const select_2 = $(editor);

        select_2.select2({
            data: list,
            width: '100%',
            multiple: true,
            minimumInputLength: 0,
        })

        if (typeof cell.getValue() == 'object') {
            const selectedValuesIds = cell.getValue().map(val => list.find(x => x.text == val).id)
            select_2.val(selectedValuesIds).trigger('change')
        }

        select_2.on('select2:select select2:unselect select2:close', () => {
            const data = select_2.select2('data')
            const cellValue = data.map(el => el.text)
            success(cellValue)
        });
        
        // $(editor).on('blur', () => cancel)

        editor.focus()
        select_2.select2('open');
    });

    return editor;
};

const table = new Tabulator("#table", {
    // debugEventsExternal: true,
    // debugEventsInternal: true,
    height: "500px",
    data: tabledata,
    rowHeight: 32,
    columns: [
        {
            title: "Name",
            field: "name",
            width: 150
        },
        {
            title: "Select2",
            field: "select2",
            width: 300,
            editor: select2Editor,
        },
    ],
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="table"></div>