jquery - 将 Select2 应用到 Slickgrid 编辑器

Question

我正在使用此 answer 中建议的下拉编辑器，创建一个选择如下:

<select tabindex="0" id='my_select' class="editor-select select2-search">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
    <option value="Black">Black</option>
    <option value="White">White</option>
</select>

现在我想使用select2用于下拉菜单。

为了将 select2 应用于下拉列表，必须调用 $("#my_select").select2()。由于选择编辑器是动态添加到网格中的，因此我不清楚如何做到这一点。

我需要像 after_render 但在显示事件之前应用 select2 之类的东西。将不胜感激任何提示。

Answer 1

如果有一个具体的例子就好了，但我认为基本上有一些你可以使用的策略:

变体 1:您直接在 SelectCellEditor 方法中应用 select2，从您发布的函数中，它应该像这样工作:

   this.init = function() {
        if(args.column.options){
          opt_values = args.column.options.split(',');
        }else{
          opt_values ="yes,no".split(',');
        }
        option_str = ""
        for( i in opt_values ){
          v = opt_values[i];
          option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>";
        }
        $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
        $select.appendTo(args.container);
        // init the select2 extension here
        $select.select2();
    }; 

第二个变体使用 mutation events 。这将使 SelectCellEditor 方法保持干净，但有一些限制:版本 9 之前的 IE 根本不支持突变事件，并且在版本 9 中无法正确实现其中一些事件，并且有一些这些事件也存在性能问题。在你的情况下，你必须听DOMNodeInserted:

document.addEventListener("DOMNodeInserted", function(event){
    var target = event.srcElement || event.target,
        $selection = (target && target.tagName.toLowerCase() == 'select') ? 
            $(target) : $(target).find('select');
        // $selection is just for the case the select field 
        // is wrapped in other elements
    if($selection) {
        // apply the select2 extension
        $selection.select2();
    }
});

我整理了an example ，这演示了动态应用。

这种情况下的事件监听器非常基本，仅限于您的请求，如果您正在寻找更高级和灵活的解决方案，已经有一些库可以处理此类事件，例如mutabor 。正如我上面所写，如果您提供具体代码的示例，以便能够在实际条件下测试这两种变体，将会有所帮助。