Question

在使用Boostrap（3.0）和SlickGrid的应用程序中，我正在尝试向该列添加bootsrap下拉列表。

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 = grid.getActiveCellPosition();
    console.debug(cellPos);
    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) {
    var a = 'Action';
    return a;
}

我不确定我所做的jsFiddle编辑是否只是暂时的，但无论如何这里都是链接：jsFiddle
另外请注意，你也可以拨打unsubscribe(fn)，但我没有发现它是必要的，因为没有它，下拉似乎就会消失。您可以在此处找到可以订阅的可用SlickGrid事件列表wiki/Grid-Events

在SlickGrid列中使用引导程序下拉列表

1 个答案: