Question

我正在尝试使用输入和下拉菜单来编辑单元格。在这种情况下，目标是编辑磁盘大小。

因此，我需要将, editor:"input", editor:true, validator:["min:0", "max:999", "numeric"]}与, editor:"select", editorParams:{"MB":"MB", "TB":"TB", "GB":"GB"}组合起来

最终结果大约是146GB。

第一次尝试： 由于这看起来像是自定义编辑器，因此我编写了这样的代码：

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},

因此，在那个问题上，存在“一些”问题。 -我不知道success（）应该做什么 -我返回一个div，希望内容会填充单元格 -每当我输入一个值并进行选择时，它根本不会被保存；可能是因为我首先要返回div

第二次尝试：由于修改不起作用，也许我可以改用单元格点击事件...

cell.getElement()确实给了我单元格的DIV内容，但是没有cell.setElement()这样的东西，对吗？我可以创建自己的div，就像在第一次尝试中那样，然后使用cell.setValue()来设置值，但是如果我不能首先显示div，那将不能很好地工作。尝试过cell.getElement().innerHTML = "<div>...</div>"，但一无所获（太容易了）

第三次尝试：好吧，让我们从框外开始（直译）

换句话说，让我们创建一个非常简单的模式，将其显示在现有单元格的顶部，然后再次使用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样式属性。

Oli能够做到，所以必须有一种方法，对吧？

任何帮助，建议和修复将不胜感激。

Answer 1

好吧，所以，如果有人感兴趣，我可以使用meouw（https://stackoverflow.com/a/442474/2868497）在此论坛上找到的功能来获取该单元格的位置：

DELETE FROM tbl_code WHERE prz_award IN (SELECT ctoon_id FROM tbl_ctoon WHERE DATEDIFF(DATE(NOW()), FROM_UNIXTIME(expire_date)) > 120) AND tbl_code.code_for = 'C'

在单元格的顶部和左侧位置，我能够将div放置在编辑字段中：

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 };
}

具有：

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);
};

我可以根据需要编辑其余字段，然后使用“保存”按钮保存修改并销毁我创建的所有要编辑的div：

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

也许有一种更容易/更干净的方法来完成它，但是它对此感到非常满意。

制表符4.2-如何使用多元素单元格进行编辑

1 个答案: