bootstrap-table.js 中的下拉按钮答案

【问题标题】：Dropdown button inside bootstrap-table.jsbootstrap-table.js 中的下拉按钮
【发布时间】：2016-05-02 21:44:54
【问题描述】：

我正在使用“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>

这段代码的结果是：

当用户点击 dropbox 时，我们得到以下结果：

但是，想要的结果是这样的：

我怎样才能做到这一点？

【问题讨论】：

标签： twitter-bootstrap bootstrap-table

【解决方案1】：

您必须通过分离将下拉菜单附加到 Body 并使用此功能将其重新附加到正文：

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

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

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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<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>

【讨论】：