Bootstrap的下拉列表被数据表隐藏 [英] Bootstrap's dropdown hidden by datatables

查看：205 发布时间：2017/4/4 21:38:19 twitter-bootstrap datatables

本文介绍了Bootstrap的下拉列表被数据表隐藏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用Twitter Bootstrap为DataTables网格中的每一行创建一个带有DropDown菜单的按钮，但DataTables中的数据容器正在使用overflow：hidden，这将使DropDown被剪切。 >

我不能只是切换到overflow：auto，因为这将导致出现一个不必要的垂直滚动条。

HTML

 < table cellpadding =0cellspacing =0border =0class =prettyid =example >< / table>

  / *获取分页信息的API方法* / 
 $ .fn.dataTableExt.oApi.fnPagingInfo = function（oSettings）{
 return {
iStart：oSettings._iDisplayStart ，
iEnd：oSettings.fnDisplayEnd（），
iLength：oSettings._iDisplayLength，
iTotal：oSettings.fnRecordsTotal（），
iFilteredTotal：oSettings .fnRecordsDisplay（），
iPage：oSettings._iDisplayLength === -1？ 0：Math.ceil（oSettings._iDisplayStart / oSettings._iDisplayLength），
iTotalPages：oSettings._iDisplayLength === -1？ 0：Math.ceil（oSettings.fnRecordsDisplay（）/ oSettings._iDisplayLength）
}; 
} 
 
 / * Bootstrap样式分页控件* / 
 $ .extend（$。fn.dataTableExt.oPagination，{
bootstrap：{
fnInit：function（oSettings，nPaging，fnDraw）{
 var oLang = oSettings.oLanguage.oPaginate; 
 var fnClickHandler = function（e）{
 e.preventDefault（）; 
 if（oSettings.oApi._fnPageChange（oSettings，e.data.action））{
 fnDraw（oSettings）; 
} 
}; 
 
 $ （nPaging）.addClass（'pagination'）。append（
'< ul>'+ 
'< li class =prev disabled>< a href =＃> & larr;'+ oLang.sPrevious +'< / a>< / li>'+ 
'< li class =next disabled>< a href =＃> + oLang.sNext +'& rarr;< / a>< / li>'+ 
'< / ul>'）; 
 var els = $（'a'，nPaging） ; 
 $（els [0]）。bind（'click.DT'，{
 action：previous
}，fnClickHandler）; 
 $（els [1]）。bind（'click.DT'，{
 action：next
}，fnClickHandler）; 
}，
 
fnUpdate：function（oSettings，fnDraw）{
 var iListLength = 5; 
 var oPaging = oSettings.oInstance.fnPagingInfo（）; 
 var a = oSettings.aanFeatures.p; 
 var i，j，sClass，iStart，iEnd，iHalf = Math.floor（iListLength / 2）; 
 
 if（oPaging.iTotalPages< iListLength）{
 iStart = 1; 
 iEnd = oPaging.iTotalPages; 
} else if（oPaging.iPage< = iHalf）{
 iStart = 1; 
 iEnd = iListLength; 
} else if（oPaging.iPage> =（oPaging.iTotalPages  -  iHalf））{
 iStart = oPaging.iTotalPages  -  iListLength + 1; 
 iEnd = oPaging.iTotalPages; 
} else {
 iStart = oPaging.iPage  -  iHalf + 1; 
 iEnd = iStart + iListLength  -  1; 
} 
 
 for（i = 0，iLen = an.length; i< iLen; i ++）{
 //删除中间元素
 $（' li：gt（0）'，an [i]）。filter（'：not（：last）'）。 
 
 //为（j = iStart; j = iEnd; j ++）添加新的列表项及其事件处理程序
 {
 sClass =（j == oPaging） iPage + 1）？ 'class =active'：''; 
 $（'< li'+ sClass +'>< a href =＃>'+ j +'< / a>< / li>'）
 .insertBefore （$（'li'last'，an [i]）[0]）
 .bind（'click'，function（e）{
 e.preventDefault（）; 
 oSettings。 _iDisplayStart =（parseInt（$（'a'，this）.text（），10） -  1）* oPaging.iLength; 
 fnDraw（oSettings）; 
}）; 
} 
 
 //从静态元素添加/删除禁用的类
 if（oPaging.iPage === 0）{
 $（'li：first' ，an [i]）。addClass（'disabled'）; 
} else {
 $（'li：first'，an [i]）。removeClass（'disabled'）; 
} 
 
 if（oPaging.iPage === oPaging.iTotalPages  -  1 || oPaging.iTotalPages === 0）{
 $（'li：last'，an [i]）。addClass（'disabled'）; 
} else {
 $（'li：last'，an [i]）。removeClass（'disabled'）; 
} 
} 
} 
} 
}）; 
 
 / *表初始化* / 
 $（document）.ready（function（）{
 $（'＃example'）。dataTable（{
aaData ：[
 / *减少数据集* / ['< div class =btn-groupstyle =float：left>'+ 
'< a class =btn btn -small dropdown-toggledata-toggle =dropdownhref =＃> Actions'+ 
'< span class =caret>< / span>'+ 
' < / a>'+ 
'< ul class =dropdown-menu>'+ 
'< li>< a href =＃>批准< / a> < / li>'+ 
'< li>< a href =＃>查看< / a>< / li>'+ 
'< / ul>'+ 
'< / div>'+ 
'< a href =＃id =editButtonclass =btn btn-small> ;< i class =icon-pencil>< / i>< / a>'+ 
'< a href =＃class =btn btn-small deleteButton>< ; i class =icon-trash>< / i>< / a>'，Internet Explorer 4.0，Win 95+，4，X]，
 [ div class =btn-groupstyle =float：left>'+ 
'< a class =btn btn-small dropdown-toggledata-toggle =dropdownhref =＃ >动作'+ 
'< span class =caret>< / span>'+ 
'< / a>'+ 
'< ul class =下拉菜单>'+ 
'< li>< a href =＃>批准< / a>< / li>'+ 
'< li& a href =＃>查看< / a>< / li>'+ 
'< / ul>'+ 
'< / div>'+ 
 '< a href =＃id =editButtonclass =btn btn-small>< i class =icon-pencil>< / i>< / a>'+ 
'< a href =＃class =btn btn-small deleteButton>< i class =icon-trash>< / i>< / a>'，Internet Explorer 5.0 ，Win 95+，5，C]，
 ['< div class =btn-groupstyle =float：left>'+ 
'< a class =btn btn-small dropdown-toggledata-toggle =dropdownhref =＃> Actions'+ 
'< span class =caret>< / span>'+ 
'< / a>'+ 
'< ul class =dropdown-menu>'+ 
'< li>< a href =＃>批准< / a>< / li>'+ 
'< li>< a href =＃>查看< / a>< / li>'+ 
 '< / ul>'+ 
'< / div>'+ 
'< a href =＃id =editButtonclass =btn btn-small> i class =icon-pencil>< / i>< / a>'+ 
'< a href =＃class =btn btn-small deleteButton>< i class =icon-trash>< / i>< / a>'，Internet Explorer 5.5，Win 95+，5.5，A]，
 ['& btn-groupstyle =float：left>'+ 
'< a class =btn btn-small dropdown-toggledata-toggle =dropdownhref =＃> '+ 
'< span class =caret>< / span>'+ 
'< / a>'+ 
'< ul class =下拉菜单>'+ 
'< li>< a href =＃>批准< / a>< / li>'+ 
' li>< a href =＃>查看< / a>< / li>'+ 
'< / ul>'+ 
'< / div>'+ 
'< a href =＃id =editButtonclass =btn btn-small>< i class =icon-pencil>< / i>< / a>'+ 
'< a href =＃class =btn btn-small deleteButton>< i class =icon-trash>< / i>< / a> Explorer 6.0，Win 98+，6，A]，
 ['< div class =btn-groupstyle =float：left>'+ 
' ; class =btn btn-small dropdown-toggledata-toggle =dropdownhref =＃> Actions'+ 
'< span class =caret>< / span> '+ 
'< / a>'+ 
'< ul class =dropdown-menu>'+ 
'< li>< a href =＃ &批准< / a>< / li>'+ 
'< li>< a href =＃>查看< / a>< / li>'+ 
' < / ul>'+ 
'< / div>'+ 
'< a href =＃id =editButtonclass =btn btn-small>< i class =icon-pencil>< / i>< / a>'+ 
' ['< div class = btn-groupstyle =float：left>'+ 
'< a class =btn btn-small dropdown-toggledata-toggle =dropdownhref =＃> + 
'< span class =caret>< / span>'+ 
'< / a>'+ 
'< ul class =下拉菜单>'+ 
'< li>< a href =＃>批准< / a>< / li>'+ 
'< li& a href =＃> View< / a>< / li>'+ 
'< / ul>'+ 
'< / div>'+ 
' ; a href =＃id =editButtonclass =btn btn-small>< i class =icon-pencil>< / i>< / a>'+ 
 '< a href =＃class =btn btn-small deleteButton>< i class =icon-trash>< / i>< / a>'，Firefox 1.5 Win 98+ / OSX.2 +，1.8，A]，
 ['< div class =btn-groupstyle =float：left>'+ 
' ; class =btn btn-small dropdown-toggledata-toggle =dropdownhref =＃> Actions'+ 
'< span class =caret>< / span> '+ 
 '< / a>'+ 
'< ul class =dropdown-menu>'+ 
'< li>< a href =＃>批准< / a> ;< / li>'+ 
'< li>< a href =＃>查看< / a>< / li>'+ 
'< / ul> + 
'< / div>'+ 
'< a href =＃id =editButtonclass =btn btn-small>< i class =icon-pencil >< / i>< / a>'+ 
'< a href =＃class =btn btn-small deleteButton>< i class =icon-trash> ; 
 ['< / a>'，Firefox 2，Win 98+ / OSX.2 +，1.8，A groupstyle =float：left>'+ 
'< a class =btn btn-small dropdown-toggledata-toggle =dropdownhref =＃> Actions'+ 
 '< span class =caret>< / span>'+ 
'< / a>'+ 
'< ul class =dropdown-menu>'+ 
'< li>< a href =＃>批准< / a>< / li>'+ 
'< li>< a href =＃> ; / a>< / li>'+ 
'< / ul>'+ 
'< / div>'+ 
'< a href =＃id = editButtonclass =btn btn-small>< i class =icon-pencil>< / i>< / a>'+ 
'< a href =＃ class =btn btn-small deleteButton>< i class =icon-trash>< / i>< / a>'，Firefox 3，Win2k + / OSX.3 + 1.9，A] 
]，
aoColumns：[{
sTitle：引擎
}，{
sTitle：浏览器
}，{ 
sTitle：平台
}，{
sTitle：版本，
sClass：center
}，{
sTitle：Grade，
sClass：center
}]，
 
'sScrollX'：100％，
' sScrollXInner'：150％，
'bScrollCollapse'：true，
'bAutoWidth'：false，
'bDeferRender'：true，
'bLengthChange'：false，sPaginationType ：bootstrap，
oLanguage：{
sLengthMenu：_MENU_每页的记录
} 
}）; 
 $（'。acoes'）。dropdown（）; 
}）;

解决方案

好的，经过我们的评论，我意识到你想要：

你有一个< div> 元素与 overflow：auto ，并且您希望该元素位于< div> （< ul> 菜单中的菜单），从溢出规则到 escape ，显示为浮动，覆盖其祖先的溢出规则。

但恐怕是不可能。你最近可以做的是：

使用javascript创建< ul> 菜单外部 < div> 与 overflow：auto ，以及然后使用位置绝对设置它应该去哪里，或

使用javascript自动滚动底部一旦该下拉菜单被激活，通过添加一个事件监听器到最后下拉菜单。

第二个选项似乎更加优雅，更少黑客。（个人我只是忽略这个问题，但如果我必须选择，我会去第二个选项）

I'm using Twitter Bootstrap to create a button with a DropDown menu for each row in a DataTables grid, but the data container from DataTables is using "overflow: hidden" what is making the DropDown to be cut.

I cannot just switch to "overflow: auto" as this will cause to appear an unnecessary vertical scrollbar.

Here is a JSFiddle

HTML

<table cellpadding="0" cellspacing="0" border="0" class="pretty" id="example"></table>

/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
    return {
        "iStart": oSettings._iDisplayStart,
            "iEnd": oSettings.fnDisplayEnd(),
            "iLength": oSettings._iDisplayLength,
            "iTotal": oSettings.fnRecordsTotal(),
            "iFilteredTotal": oSettings.fnRecordsDisplay(),
            "iPage": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
            "iTotalPages": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
    };
}

/* Bootstrap style pagination control */
$.extend($.fn.dataTableExt.oPagination, {
    "bootstrap": {
        "fnInit": function (oSettings, nPaging, fnDraw) {
            var oLang = oSettings.oLanguage.oPaginate;
            var fnClickHandler = function (e) {
                e.preventDefault();
                if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
                    fnDraw(oSettings);
                }
            };

            $(nPaging).addClass('pagination').append(
                '<ul>' +
                '<li class="prev disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' +
                '<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </a></li>' +
                '</ul>');
            var els = $('a', nPaging);
            $(els[0]).bind('click.DT', {
                action: "previous"
            }, fnClickHandler);
            $(els[1]).bind('click.DT', {
                action: "next"
            }, fnClickHandler);
        },

            "fnUpdate": function (oSettings, fnDraw) {
            var iListLength = 5;
            var oPaging = oSettings.oInstance.fnPagingInfo();
            var an = oSettings.aanFeatures.p;
            var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);

            if (oPaging.iTotalPages < iListLength) {
                iStart = 1;
                iEnd = oPaging.iTotalPages;
            } else if (oPaging.iPage <= iHalf) {
                iStart = 1;
                iEnd = iListLength;
            } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
                iStart = oPaging.iTotalPages - iListLength + 1;
                iEnd = oPaging.iTotalPages;
            } else {
                iStart = oPaging.iPage - iHalf + 1;
                iEnd = iStart + iListLength - 1;
            }

            for (i = 0, iLen = an.length; i < iLen; i++) {
                // Remove the middle elements
                $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                // Add the new list items and their event handlers
                for (j = iStart; j <= iEnd; j++) {
                    sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
                    $('<li ' + sClass + '><a href="#">' + j + '</a></li>')
                        .insertBefore($('li:last', an[i])[0])
                        .bind('click', function (e) {
                        e.preventDefault();
                        oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
                        fnDraw(oSettings);
                    });
                }

                // Add / remove disabled classes from the static elements
                if (oPaging.iPage === 0) {
                    $('li:first', an[i]).addClass('disabled');
                } else {
                    $('li:first', an[i]).removeClass('disabled');
                }

                if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
                    $('li:last', an[i]).addClass('disabled');
                } else {
                    $('li:last', an[i]).removeClass('disabled');
                }
            }
        }
    }
});

/* Table initialisation */
$(document).ready(function () {
    $('#example').dataTable({
        "aaData": [
        /* Reduced data set */ ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 4.0", "Win 95+", 4, "X"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 5.0", "Win 95+", 5, "C"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 5.5", "Win 95+", 5.5, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 6.0", "Win 98+", 6, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 7.0", "Win XP SP2+", 7, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A"]
        ],
            "aoColumns": [{
            "sTitle": "Engine"
        }, {
            "sTitle": "Browser"
        }, {
            "sTitle": "Platform"
        }, {
            "sTitle": "Version",
            "sClass": "center"
        }, {
            "sTitle": "Grade",
            "sClass": "center"
        }],

            'sScrollX': "100%",
            'sScrollXInner': "150%",
            'bScrollCollapse': true,
            'bAutoWidth': false,
            'bDeferRender': true,
            'bLengthChange': false, "sPaginationType": "bootstrap",
            "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    });
    $('.acoes').dropdown();
});

解决方案

Ok, after the comments we had, I realized what you want:

You have a <div> element with overflow:auto, and you want that an element inside of that <div> (the <ul> where the menu is), to "escape" from the overflow rule and appear floating, overriding the overflow rule from its ancestor.

But I'm afraid that is not possible. The closest thing you could do is:

Use javascript to create the <ul> with the menu outside the <div> with overflow:auto, and then use position absolute to set it where it should go, or
Use javascript to auto scroll at the bottom once that dropdown menu is activated, by adding something like an event listener to the the last dropdown.

The second option seems more elegant and less 'hackish'. (Personally I would just ignore that problem, but if I have to choose, I would go for the second option)

这篇关于Bootstrap的下拉列表被数据表隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Bootstrap的下拉列表被数据表隐藏 [英] Bootstrap's dropdown hidden by datatables

问题描述

相关文章

JavaScript最新文章

热门教程

热门工具

登录关闭

Bootstrap的下拉列表被数据表隐藏 [英] Bootstrap&#39;s dropdown hidden by datatables

问题描述

相关文章

JavaScript最新文章

热门教程

热门工具

登录 关闭

Bootstrap的下拉列表被数据表隐藏 [英] Bootstrap's dropdown hidden by datatables

登录关闭