twitter-bootstrap - bootstrap-table.js 中的下拉按钮-6ren

twitter-bootstrap - bootstrap-table.js 中的下拉按钮

转载作者：行者123 更新时间：2023-12-01 04:49:32

25

4

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

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

但是，当我将下拉菜单放入单元格中时，选项以一种奇怪的方式显示在表格中。

我真的很想知道是否可以显示 float 在表格外的下拉选项。

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

这段代码的结果是:

当用户点击下拉框时，我们得到以下结果:

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

我怎样才能做到这一点？

最佳答案

您必须通过分离下拉菜单将其附加到 Body，然后使用此函数将其重新附加到 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>