Приведу пример своего кода.
Сформируйте массив значений, где 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;
};
}
