制表符:如何根据另一个单元格的值创建动态自定义编辑器

本文介绍了制表符:如何根据另一个单元格的值创建动态自定义编辑器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

使用 Tabulator，我想根据另一个单元格的值动态创建一个单元格的编辑器，input 或 select.

Using Tabulator, I want to dynamically create a cell's editor, either input or select, based on another cell's value.

声明:

var valueEditor = function(cell, onRendered, success, cancel, editorParams)

我似乎能够声明正确的编辑器，并且我在 editorParams 中有可用的值列表，这些值被传递给函数 API，但是对于 select 我无法获得下拉以显示值.

I seem to be able to declare the correct editor and I have the list of values are available in the editorParams the is passed to the function API, but for theselect I can't get the drop-down to display the values.

这是一个代码片段:

        var valueEditor = function(cell, onRendered, success, cancel, editorParams) {
        const item = cell.getRow().getData();

        var editor = null;

        // Use a combobox when the type is Choice, or regular input cell otherwise
        if (item.type === "Choice") {
          editor = document.createElement("select");
          editor.setAttribute("values", editorParams.values );   // <-- This is probably incorrect, but I'm unable to assign the right attribute
        } else {
          editor = document.createElement("input");
          editor.setAttribute("type", "text");
        }

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

        editor.value = item.value;    

        //when the value has been set, trigger the cell to update
        function successFunc(){
            success(editor.value );
        }

        editor.addEventListener("change", successFunc);
        editor.addEventListener("blur", successFunc);

        //return the editor element
        return editor;
      };
      {title: 'Name', field: 'name', width: 130},
      {title: 'Type', field: 'type', width: 95},
      {title: 'Value', field: 'value', width: 260, editor: valueEditor }];

当我行的类型列是选择"时，我想显示一个组合框，比如 Choice1、Choice2、Choice3、Choice4.否则，我想要一个常规的输入单元格，用户可以在其中输入任何值.

When my row's type column is "Choice", I would like to show a combobox with, say Choice1, Choice2, Choice3, Choice4. Otherwise, I want to have a regular Input cell where the user can enter any values.

推荐答案

我花了很多时间，找到了这种方法来创建 Tabulator 的自定义选择编辑器，用于根据 KEY 值显示 NAME.希望这篇文章对某人有所帮助.

It took much time and I found this way to create custom select editor of Tabulator for showing NAME base on KEY value. Hope this post helps someone.

var cboData = [
{
    "key": "",
    "name": ""
},
{
    "key": "01",
    "name": "OPTION 1"
},
{
    "key": "02",
    "name": "OPTION 2"
}];
var comboEditor = function (cell, onRendered, success, cancel, editorParams) {
    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 successFunc() {
        success(editor.value);
    }

    editor.addEventListener("change", successFunc);
    editor.addEventListener("blur", successFunc);

    return editor;
};

在列中设置如下:

  {
        title: "SELECTION",
        field: 'select_key',
        headerHozAlign: 'center',
        hozAlign: 'center',
        editor: comboEditor,
        editorParams: cboData,
        formatter: function (cell, formatterParams) {
            for (var i = 0; i < formatterParams.length; i++) {
                if (formatterParams[i].key == cell.getValue()) {
                    return formatterParams[i].name;
                }
            }
        },
        formatterParams: cboData,
    },

这篇关于制表符:如何根据另一个单元格的值创建动态自定义编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！