时间戳

首页 > 解决方案 > 制表符和 Select2，在加载时不显示选择值

jquery-select2-4 - 制表符和 Select2，在加载时不显示选择值

问题描述

我想在 Tabulator 中使用 Select2 但触发所选值不起作用。

这是我的表格列格式化程序代码：

{
    title: "Select2", field: "lucky_no", align: "center", width: 300, editor: true,
    formatter: function (cell, formatterParams, onRendered) {
        onRendered(function () {
            var select_2 = $(cell.getElement());
            select_2.select2({
                         theme: "classic",
                         placeholder: 'Select',
                         data: list,
                         minimumResultsForSearch: Infinity,
                         width: 300,
                         minimumInputLength: 0,
                         allowClear: true,
            }).on('change', function (e) {
                                console.log('change');
                            });

            select_2.val(list[cell.getValue()].id);
            var x = select_2.val();
            select_2.val(x).trigger('change');
        })
    }
},

我添加了一个工作示例。

触发所选值在表格上方的下拉菜单中起作用。尽管在表格中触发了更改事件，但它不会在下拉列表中显示所选值。

谢谢，

广告

标签： jquery-select2-4tabulator

解决方案

如果您试图使该字段可编辑，您应该创建一个自定义编辑器而不是格式化程序

格式化程序用于向用户显示数据，编辑器用于允许用户编辑数据。

内置选择编辑器

在我深入这个示例之前，您是否知道 Tabulator 已经内置了一个选择编辑器以使您的生活更加轻松，在文档中的演示中，查看性别列以查看它的实际效果。

自定义编辑器

使用自定义编辑器时，它们带有选择和取消回调，允许您将数据传递回表中。

因此，对于您的示例，它应该看起来像这样（此代码未经测试）

//create custom editor
var select2Editor = function(cell, onRendered, success, cancel, editorParams){

    //create input element to hold select
    var editor = document.createElement("input");

    onRendered(function(){
        var select_2 = $(editor);

        select_2.select2({
             theme: "classic",
             placeholder: 'Select',
             data: list,
             minimumResultsForSearch: Infinity,
             width: 300,
             minimumInputLength: 0,
             allowClear: true,
        });

        select_2.on('change', function (e) {
            success(select_2.val());
        });


        select_2.on('blur', function (e) {
            cancel();
        });
    });


    //add editor to cell
    return editor;
}


//in your column definition for the column
{title: "Select2", field: "lucky_no", align: "center", width: 300, editor: select2Editor},

推荐阅读