1

我正在使用此答案中建议的下拉编辑器，创建如下选择：

<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 应用于它。将不胜感激任何提示。

4

1 回答 1

3

有一个具体的例子会很好，但我认为基本上可以使用以下策略：

变体 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();
    };

第二种变体是使用突变事件。这将使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();
    }
});

我整理了一个例子，它演示了动态应用。

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

于 2013-02-02T10:21:29.137 回答