Question

我使用“bootstrap-table.js”列出/显示我的数据。

对于每一行，我想显示一个下拉列表，其中包含一些相关的记录选项。

但是，当我将下拉列表放在单元格内时，选项会以奇怪的方式显示在表格中。

我真的想知道是否有可能显示下拉选项浮出桌面。

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" href="/Content/bootstrap-table.css" />
    <link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>

    <table id="table" data-classes="table table-hover table-condensed" data-toggle="table" data-show-columns="true" data-height="250">

        <thead>
            <tr>
                <th data-field="id">Item ID</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
                <th data-formatter="dataFormater" data-width="90">-</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>1</td>
                <td>Item 1</td>
                <td>$1</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item 2</td>
                <td>$2</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Item 3</td>
                <td>$3</td>
                <td></td>
            </tr>

        </tbody>

    </table>

<script src="/Scripts/jquery-2.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/bootstrap-table.js" type="text/javascript"></script>

<script type="text/javascript">

    function dataFormater(value, row, index) {

        var id = row.id;

        var strHTML = "<div class='btn-group' astyle='position: absolute'><button type='button' class='btn btn-primary btn-xs dropdown-toggle' data-toggle='dropdown'>Options<span class='caret'></span></button><ul class='dropdown-menu text-left' role='menu' style='position:absolute'>";
        strHTML += "<li><a href='/Edit/" + id + "'><span class='glyphicon glyphicon-edit'></span>&nbsp;&nbsp;Edit</a></li>";
        strHTML += "<li><a href='/Delete/" + id + "'><span class='glyphicon glyphicon-remove'></span>&nbsp;&nbsp;Remove</a></li>";
        strHTML += "</ul></div>";

        var valReturn = strHTML;

        return valReturn;
    }

</script>

</body>
</html>

此代码的结果是：

当用户点击保管箱时，我们会得到以下结果：

但是，期望的结果是：

我怎样才能做到这一点？

Answer 1

您必须将下拉菜单附加到 Body ，方法是将其删除，然后使用此功能将其重新附加到正文：

click

＆＃13;

zone.run

＆＃13;

(function () {
var dropdownMenu;
$(window).on('show.bs.dropdown', function (e) {
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());
    var eOffset = $(e.target).offset();
    dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': eOffset.left
    });
});
$(window).on('hide.bs.dropdown', function (e) {
    $(e.target).append(dropdownMenu.detach());
    dropdownMenu.hide();
});
})();

＆＃13;

bootstrap-table.js中的下拉按钮

1 个答案: