在 SlickGrid 列中使用引导下拉菜单

Question

在使用 Boostrap (3.0) 和 SlickGrid 的应用程序中，我正在尝试将引导程序下拉列表添加到列中。

var columns = [                    
    {id:"rowNumber", name:"", field: "", editor:Slick.Editors.Text, formatter:RowNumberFormatter, behavior:"select", cssClass:"cell-selection", width:40, cannotTriggerInsert:true, resizable:false, unselectable:true, sortable:false},
    {id:"A", name:"X", field: "A", editor:Slick.Editors.Text, sortable:false, width:120},
    {id:"B", name:"Y", field: "B", readonly:true, width:120,
        formatter: linkFormatter = function (row, cell, value, columnDef, dataContext) {
             var a = 
                '<div class="dropdown">' +
                '  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Action</a>' +
                '  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">' +
                '      <li><a href="#">Item 1</a></li>' +
                '      <li><a href="#">Item 2</a></li>' +
                '      <li><a href="#">Item 3</a></li>' +
                '      <li><a href="#">Item 4</a></li>' +
                '  </ul>' +
                '</div>    ';
             return a;
        }
    }
];

但是它不起作用。我的猜测是，应该在格式化程序生成 HTML 之后应用 boostrap 绑定（魔术）。我该怎么做？

这里是一个 jsFiddle 版本：http://jsfiddle.net/kilativ/tEU37/

Answer 1

您的实际问题不是您想象的那样...下拉菜单确实有效，但只是没有显示在前面...并且尝试更改 z-index 似乎没有帮助。现在我找到了部分解决方案，修复它还不够，但足以看到问题。
添加这段 CSS：

.dropdown {
    position: fixed;
}

您会看到您的菜单正在显示，但与网格的其余部分混合在一起，我尝试将所有类型的 z-index 放入其中，但无法使其完全正常工作。我将不得不挖掘更多，但现在这是一个开始......

解决方案
所以我花了更多时间在这方面，赏金帮助嘿嘿，并为您的问题找到了解决方案。首先，您不能直接在格式化程序中执行此操作，因为单元格不能变大，z-index 对此无济于事，因为您受限于单元格大小。相反，您要做的是创建一个外部<div>，将其附加到主体并使用单元格 X/Y 值重新定位它，然后还要确保新的<div> 作为z-index 足够高以启用网格顶部......很好，但现在的问题是你如何触发动作？只需为此事件onActiveCellChanged() 订阅一个函数即可。以您为例，我将您的代码从格式化程序移至新函数，因此我添加了这段代码：

grid.onActiveCellChanged.subscribe(function(e,args){
    $('#myDrop').remove(); // make sure to remove previous dropdown, you don't want to have 100 after a 100 clicks...
    if(args.cell != 2) {
        return;
    }
    var cellPos = args.grid.getActiveCellPosition();
    var elm = $('<div id="myDrop" class="dropdown" style="position:absolute; z-index:10000;">' +
        '  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Action</a>' +
        '  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">' +
        '      <li><a href="#">Item 1</a></li>' +
        '      <li><a href="#">Item 2</a></li>' +
        '      <li><a href="#">Item 3</a></li>' +
        '      <li><a href="#">Item 4</a></li>' +
        '  </ul>' +
        '</div>    ');
    $('body').append(elm);
    elm.css('top', cellPos.top + 5);
    elm.css('left', cellPos.left + 5);
    $('#myDrop.dropdown-toggle').dropdown('toggle');
    setTimeout(function () {
        $('#myDrop').addClass('open'); // make sure to open the dropdown, delayed so it really open after it's fully created
    }, 50);

});

我本来打算删除你的格式化程序，但由于你有一些随机整数值，所以我用这段代码替换了：

formatter: linkFormatter = function (row, cell, value, columnDef, dataContext) {
    return 'Action';
}

我不确定我所做的jsFiddle 的编辑是否只是暂时的，但无论如何这里是链接：jsFiddle
另请注意，您也可以致电unsubscribe(fn)，但我认为没有必要，因为没有它，下拉菜单似乎消失了。你可以在这里找到可用的 SlickGrid 事件列表wiki/Grid-Events