我正在使用库制表器,并try 使用 bootstrap 下拉菜单,但我不知道如何完全显示下拉菜单或显示行外的下拉菜单.
var table = new Tabulator("#example-table", {
layout:"fitColumns",
height:"100%",
ajaxURL:"https://jsonblob.com/api/jsonBlob/1010194405638029312",
columns:[
{title:"Report", field:"report_nom"},
{title:"Last update", field:"report_updatedate", width:300},
{title:"Action", field:"report_download", formatter:"html", headerSort:false, width:300}
]
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/tabulator-tables@5.2.3/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.3/dist/js/tabulator.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<div id="example-table"></div>
以下是完整的json数据:
[
{
"report_id": 4,
"report_nom": "Cars",
"report_description": "Car list",
"report_frequency": "1",
"report_filename": "4619082022130005f16de18332f9dab9cbcf6903120837e37762f0c7",
"access_download": "true",
"access_id": 3,
"report_updatedate": "19/08/2022 00:00:09",
"report_download": "<div style='display: flex'><div class='dropdown'> <button class='btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Dropdown button</button><div class='dropdown-menu' aria-labelledby='dropdownMenuButton'><a class='dropdown-item' href='#'>Action</a><a class='dropdown-item' href='#'>Another action</a><a class='dropdown-item' href='#'>Something else here</a></div></div></div>"
}
]
我试着增加了一个高度z-index
,但没有解决它.
我正在寻找的结果: