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

时间:2019-08-12 15:47:38

标签: tabulator

使用制表符,我想基于另一个单元格的值动态创建一个单元格的编辑器, Dim cmd As SqlCommand Dim da As SqlDataAdapter Dim da2 As SqlDataAdapter cmd = MSSQL_CONN.CreateCommand cmd.CommandType = CommandType.Text cmd.CommandText = "select * from vw_backlog with (nolock) where order_id = " & m_order.id da = New SqlDataAdapter(cmd) cmd = MSSQL_CONN.CreateCommand cmd.CommandType = CommandType.Text cmd.CommandText = "SELECT order_id, backlog_id, special_handling_id, comment_id, message FROM vw_backlog_special_handling_comments with (nolock) WHERE order_id = " & m_order.id da2 = New SqlDataAdapter(cmd) Dim ds As New DataSet() da.Fill(ds, "Backlogs") da2.Fill(ds, "Messages") Dim keyColumn As DataColumn = ds.Tables("Backlogs").Columns("backlog_id") Dim foreignKeyColumn As DataColumn = ds.Tables("Messages").Columns("backlog_id") ds.Relations.Add("gvSpecialHandlingComments", keyColumn, foreignKeyColumn) gcBacklog.DataSource = ds.Tables("Backlogs") gcBacklog.ForceInitialize() gcBacklog.LevelTree.Nodes.Add("SpecialHandlingComments", gvSpecialHandlingComments) gvSpecialHandlingComments.PopulateColumns(ds.Tables("Messages")) input

声明:

select

我似乎能够声明正确的编辑器,并且在editor中有可用的值列表参数已传递给函数API,但是对于var valueEditor = function(cell, onRendered, success, cancel, editorParams) ,我无法获得下拉菜单显示值。

这是一个代码段:

select

当我的行的类型列为“选择”时,我想显示一个带有 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 }]; 的组合框。否则,我希望有一个常规的输入单元格,用户可以在其中输入任何值。

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

我认为

项目是一个对象,因此您需要找到单元格的属性值,例如:

editor.value = item [cell.getField()]