[英]"Uncaught TypeError: $(...).modal is not a function" when trying to open modal from Tabulator
這個問題已經得到了回答,但這些答案對我不起作用。 我已經嘗試更新我的依賴項,我什至添加了一些。
我正在使用制表符來管理用戶。 當我單擊制表符中的單元格時,我希望它打開一個模態,以便我可以自動填充它。
如何在行/單元格單擊時打開模態? 我知道行點擊我沒有使用正確的功能,我只使用單元格點擊進行測試。
我收到以下錯誤:
gestaoutilizadores:338 未捕獲的類型錯誤:$(...).modal 不是 HTMLDivElement 的 t.cellClick (gestaoutilizadores:338) 的函數。 (tabulator.min.js:4)
依賴關系
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
模態
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Javascript(制表符)
var table = new Tabulator("#example-table", {
height: "100%", // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
pagination: "local", //enable local pagination.
paginationSize: 5, // this option can take any positive integer value (default = 10)
columns: [ //Define Table Columns
{
title: "ID",
field: "id",
width: 150
},
{
title: "Tipo Utilizador",
field: "type",
align: "center",
/*, align:"left", formatter:"progress"*/ formatter: "lookup",
formatterParams: {
"0": "Super User",
"1": "Admin",
"2": "Utilizador Normal",
}
},
{
title: "Username",
field: "username",
align: "center",
cellClick: function(e, cell) {
var data = cell.getData();
$('#exampleModal').modal('toggle');
console.log(data);
console.log("username")
},
},
{
title: "Password",
field: "password",
align: "center"
},
{
title: "Empresa",
field: "empresa",
align: "center"
},
{
title: "Data de Criacao",
field: "createDate",
sorter: "date",
align: "center"
},
],
});
您需要在引導庫之前導入 jQuery 庫。
這是因為 bootstrap 庫會在加載包時使用 jQuery 注冊模態插件,如果發生這種情況時 jQuery 不存在,則不會加載模態插件並且您的代碼將出錯。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.