Tabulator js, Как срендерить селект кастомно?

Question

[stepan-neretin7]

const catalogs = {"1": "тест", "2": "тест", "3": "kekw"};

Здравствуйте, у меня такой массив всех каталогов

У меня два вопроса: 1) Как я могу отобразить имя по идентификатору при отображении поля catalog_id в табуляторе 2) Как выбрать, что пользователю будут отображаться имена каталогов, а значение поля catalog_id будет быть идентификатором каталога, чтобы этот выбор имел каталог по умолчанию, который теперь прикреплен к продукту

Вот сама библиотека -> tabulator.info/docs/4.9/tree#select

Answer 1

[Александр Соболев]

Приведу пример своего кода.
Сформируйте массив значений, где key - id каталога, а name - имя

/* - Обработка Select - */

var voiseType = [
	{  "key": "man", "name": "Мужской" },
	{  "key": "woman","name": "Женский" },
	{  "key": "duet","name": "Дуэт" },
	{  "key": "group","name": "Групповой" }

];

var SelectDataEditor = function (cell, onRendered, success, cancel, editorParams) {

    var cellValue = cell.getValue();

    var editor = document.createElement("select");
    for (var i = 0; i < editorParams.length; i++) {
        var opt = document.createElement('option');
        opt.value = editorParams[i].key;
        opt.innerHTML = editorParams[i].name;
        editor.appendChild(opt);
    }

    editor.style.padding = "3px";
    editor.style.width = "100%";
    editor.style.boxSizing = "border-box";

    editor.value = cell.getValue();

    onRendered(function () {  editor.focus();  editor.style.css = "100%"; });

    function onSelect() { if(editor.value != cellValue){ saveChanges(cell.getData().id, cell.getField(), editor.value); success(editor.value); }  else{ cancel(); } }

    editor.addEventListener("blur", throttle(onSelect, 1000) );

    return editor;
};

В табуляторе:

{title: "Тип вокала", field: 'gender', headerHozAlign: 'center', hozAlign: 'center', editor: SelectDataEditor, editorParams: voiseType,
				        formatter: function (cell, formatterParams) {
				            for (var i = 0; i < formatterParams.length; i++) {
				                if (formatterParams[i].key == cell.getValue()) {  return formatterParams[i].name;  }
				            }
				        },  formatterParams: voiseType,
				    },

Ну и троттл (может Вам и не пригодится, или пригодится не такой - их примеров множество в интернете)

const throttle = (fn, throttleTime) => {
    let start = -Infinity;
    let cachedResult;

    return function() {
        const end = Date.now();
        
        if (end - start >= throttleTime) {
            start = end;
            cachedResult = fn.apply(this, arguments);
        }
        
        return cachedResult;
    };
}