Tabulator 4.2 - как использовать многоэлементную ячейку для редактирования - PullRequest
Новая
       14

Tabulator 4.2 - как использовать многоэлементную ячейку для редактирования

0 голосов
/ 28 марта 2019

Я пытаюсь редактировать ячейку с вводом и выпадающим списком. Цель состоит в том, чтобы отредактировать, в данном случае, размер диска.

Поэтому мне нужно объединить , editor:"input", editor:true, validator:["min:0", "max:999", "numeric"]} с , editor:"select", editorParams:{"MB":"MB", "TB":"TB", "GB":"GB"}

Окончательный результат примерно 146 ГБ.

1-я попытка: Так как это выглядит как пользовательский редактор, я написал это: 

var CapacityEditor = function(cell, onRendered, success, cancel, editorParams){
    var capacity = document.createElement("div");
    capacity.style.width = "100%";

    var size = document.createElement("input");
    size.setAttribute("type", "text");
    size.style.width = "50px";
    size.style.textAlign = "right";
    onRendered(function(){
        size.focus();
        //size.style.css = "100%";
    });
    capacity.append(size);

    var multiplier = document.createElement("select");
    multiplier.style.width = "45px";
    multiplier.append(new Option("MB","MB",true,true));
    multiplier.append(new Option("GB","GB"));
    multiplier.append(new Option("TB","TB"));
    capacity.append(multiplier);
    var multi = "MB";

    function successFunc(){
        success(size.value+multi);
    }

    function setmultiFunc() {
        multi = multiplier.options[multiplier.selectedIndex].text;
        successFunc();
    }

    size.addEventListener("change", successFunc);
    size.addEventListener("blur", successFunc);
    multiplier.addEventListener("change", successFunc);
    multiplier.addEventListener("blur", successFunc);

    return capacity;
}

с: 

{title:"Capacity", field:"Size", align:"center", width:95, editor:CapacityEditor, sorter:SizeSorter, sortable: true},

Итак, по этому вопросу есть «несколько» вопросов. - Я понятия не имею, что должен делать успех () - Я возвращаю div в надежде, что содержимое заполнит ячейку - Когда бы я ни вводил значение и делал выбор, он вообще не сохраняется; вероятно, потому что я возвращаю div в первую очередь

2-я попытка: Поскольку редактирование не работает, возможно, я мог бы вместо этого использовать событие щелчка ячейки ...

cell.getElement() действительно дает мне содержимое DIV для ячейки, как и ожидалось, но такого понятия, как cell.setElement(), не существует, верно? Я могу создать свой собственный div, как при первой попытке, а затем использовать cell.setValue(), чтобы установить значение, но если я не могу отобразить свой div в первую очередь, это не слишком хорошо работает. Пытался cell.getElement().innerHTML = "<div>...</div>", но ничего (вааааа, слишком просто)

3-я попытка: Хорошо, давайте тогда выйдем за рамки (буквально)

Другими словами, давайте создадим очень простой модал, отобразим его поверх существующей ячейки и затем снова используем cell.setValue() для обновления значения. Проблема в том, как мне получить положение ячейки? Используя встроенный редактор, editor:"select" заменяет div ячейки вводом только для чтения и создает div в теле документа с несколькими div, а затем размещает его прямо под ячейкой, делая его похожим на раскрывающийся список: 

<input type="text" readonly="" style="padding: 4px; width: 100%; box-sizing: border-box; height: 100%;">
<div class="tabulator-edit-select-list" style="min-width: 80px; top: 348px; left: 671px;"><div class="tabulator-edit-select-list-item" tabindex="0">10K</div><div class="tabulator-edit-select-list-item" tabindex="0">15K</div><div class="tabulator-edit-select-list-item" tabindex="0">7.2K</div><div class="tabulator-edit-select-list-item active" tabindex="0">na</div></div>

Обратите внимание на атрибуты стиля top и left.

Оли может сделать это, поэтому должен быть способ, верно?

Любая помощь, совет, исправление будет высоко ценится.

1 Ответ

0 голосов
/ 28 марта 2019

Хорошо, поэтому, если кому-то интересно, я смог получить позицию ячейки с помощью функции, найденной на этом форуме meouw (https://stackoverflow.com/a/442474/2868497):

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

С верхней и левой позицией ячейки,Я смог разместить свой div для редактирования моего поля: 

var globalCellClick = function(e, cell){
    var capacity = document.createElement("div");
    capacity.style.position = "absolute";
    capacity.style.left = getOffset(cell.getElement()).left + "px";
    capacity.style.top = getOffset(cell.getElement()).top + "px";
    capacity.setAttribute("name", "capacity-edit");

    var size = document.createElement("input");
    size.setAttribute("type", "", "text");
    size.style.width = "47px";
    size.style.height = "31px";
    size.style.textAlign = "right";
    capacity.append(size);

    var multiplier = document.createElement("select");
    multiplier.style.width = "47px";
    multiplier.style.height = "31px";
    multiplier.append(new Option("MB","MB",true,true));
    multiplier.append(new Option("GB","GB"));
    multiplier.append(new Option("TB","TB"));
    capacity.append(multiplier);

    document.body.appendChild(capacity); 

    function updateCell(){
        var multi = multiplier.options[multiplier.selectedIndex].text;
        cell.setValue(size.value+multi);
    }

    size.focus();
    size.addEventListener("change", updateCell);
    size.addEventListener("blur", updateCell);
    multiplier.addEventListener("change", updateCell);
    multiplier.addEventListener("blur", updateCell);
};

с помощью: 

{title:"Capacity", field:"Size", align:"center", width:95, cellClick:globalCellClick, sorter:SizeSorter, sortable: true},

Я могу редактировать остальные поля по мере необходимости, и затем я использую сохранениенажмите кнопку, чтобы сохранить изменения и уничтожить все созданные мной div элементы для редактирования: 

$("#tabulator-controls  button[name=save-data]").on("click", function(){
    $("div[name=capacity-edit]").remove();
    // update the database
});

Возможно, есть более простой / понятный способ сделать это, но он так рад этому.

...