[英]My bootstrap dropdown is not working and I tried everything to make it work as per my knowledge
出于某种原因,我的下拉菜单不起作用。 我已经添加了我找到的所有引导程序 CDN 和文件,jquery 脚本也最先出现,但没有任何反应,我一遍又一遍地点击按钮不起作用。 这是一个例外情况,表由 Javascript 处理,我不知道这是否是问题所在,我没有发现它。 拜托,我想在这里寻求一些帮助以使我的下拉菜单正常工作,谢谢!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TSS BRA Automation For Unbilled</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"> crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="static/styles/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css"> rel="stylesheet">
<link rel="stylesheet" href="static/css/bootstrap-table.min.css" rel="stylesheet">
<!-- Style CSS -->
<link rel="stylesheet" href="static/styles/css/main-styles.css">
<!-- Style SCSS -->
<link rel="stylesheet" href="static/styles/scss/style.css">
</head>
<body class="main-layout">
<!-- <div class="loader_bg">
<div class="loader"><img src="static/styles/static/images/loading.gif" alt="#" /></div>
</div> -->
<header>
<div class="header_bg">
<div class="header">
<a href="index.html"><img class="logo"
src="https://i.postimg.cc/bwWpnryh/images-removebg-preview.png"
alt="#" />
</a>
</div>
<section class="banner_main">
<div class="container-fluid">
<div class="row d_flex">
<div class="text-bg">
<h1><strong>Welcome to<br/></strong> TSS BRA Automation
for Unbilled</h1>
</div>
</div>
</section>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="center">
<i class="fa-solid fa-upload"></i>
<strong>Upload your files</strong>
</div>
</div>
<div class="cardBody card-block">
<div id="message" class="d-none">
<div class="alert alert-success
alert-dismissible">
<a href="#" class="close"
data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Files uploaded.
</div>
</div>
<form method="POST" action="/"
enctype="multipart/form-data"
class="form-horizontal" id="form">
<div class="row form-group">
<div class="col-12 col-md-12">
<div class="control-group" id="fields">
<label class="control-label"
for="formFile">
Chis Ativo
</label>
<label class="control-label2"
for="formFile2">
Gis Mensal
</label>
<div class="controls">
<div class="entry_1 upload-input">
<input class="form-control "
name="file_1" type="file"
id="activeChisForm"
accept="xlsx" required>
</div>
<div class="entry_2 upload-input">
<input class="form-control"
name="file_2" type="file"
id="gisForm" accept="xlsx"
required>
</div>
</div>
<button class="submitButton"
type="submit" value="Submit"
id="bsubmit" style="--content:
'Upload';">
<div class="left"></div>
Upload
<div class="right"></div>
</button>
<a target="_blank" href="#"><svg
style="width:2em;height:2em;position:fixed;top:1em;left:1em;opacity:.8;"
viewBox="0 0 24 24"></svg></a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="cardBody card-block">
<div class="select">
<select class="form-control" id="locale">
<option value="en-US">English</option>
<option value="es-ES">Español</option>
<option value="pt-BR" selected>Português</option>
</select>
</div>
<div id="toolbar">
<button id="remove" class="btn btn-danger"
disabled>
Delete
</button>
</div>
<table
id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-fullscreen="true"
data-height="100"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-detail-view="true"
data-show-export="true"
data-click-to-select="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, all]"
data-show-footer="true"
data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
data-side-pagination="server"
data-response-handler="responseHandler">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<a target=”_blank”
href="https://w3.ibm.com/w3publisher/amq2c-kaizen"><img
class="citech"
src="https://i.postimg.cc/y8qRPTs7/citechlogo.png">
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- <script src="static/styles/js/jquery-3.5.1.js"></script> -->
<script src="static/styles/js/jquery-3.6.2.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table-locale-all.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table-locale-all.min.js'"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" src="static/styles/js/script.js"></script>
<script type="text/javascript" src="static/styles/js/custom.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap-table.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap-table.min.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap.bundle.js"></script>
</body>
</html>
Javascript
var $table = $('#table')
var $remove = $('#remove')
var selections = []
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
})
}
function responseHandler(res) {
$.each(res.rows, function (i, row) {
row.state = $.inArray(row.id, selections) !== -1
})
return res
}
function detailFormatter(index, row) {
var html = []
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>')
})
return html.join('')
}
function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="fa fa-heart"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="fa fa-trash"></i>',
'</a>'
].join('')
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row))
},
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
})
}
}
function totalTextFormatter(data) {
return 'Total'
}
function totalNameFormatter(data) {
return data.length
}
function totalPriceFormatter(data) {
var field = this.field
return '$' + data.map(function (row) {
return +row[field].substring(1)
}).reduce(function (sum, i) {
return sum + i
}, 0)
}
function initTable() {
$table.bootstrapTable('destroy').bootstrapTable({
height: 550,
locale: $('#locale').val(),
columns: [
[{
field: 'state',
checkbox: true,
rowspan: 2,
align: 'center',
valign: 'middle'
}, {
title: 'Item ID',
field: 'id',
rowspan: 2,
align: 'center',
valign: 'middle',
sortable: true,
footerFormatter: totalTextFormatter
}, {
title: 'Item Detail',
colspan: 3,
align: 'center'
}],
[{
field: 'name',
title: 'Item Name',
sortable: true,
footerFormatter: totalNameFormatter,
align: 'center'
}, {
field: 'price',
title: 'Item Price',
sortable: true,
align: 'center',
footerFormatter: totalPriceFormatter
}, {
field: 'operate',
title: 'Item Operate',
align: 'center',
clickToSelect: false,
events: window.operateEvents,
formatter: operateFormatter
}]
]
})
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table',
function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
selections = getIdSelections()
})
$table.on('all.bs.table', function (e, name, args) {
console.log(name, args)
})
$remove.onClick(function () {
var ids = getIdSelections()
$table.bootstrapTable('remove', {
field: 'id',
values: ids
})
$remove.prop('disabled', true)
})
}
$(function () {
initTable()
$('#locale').onChange(initTable)
})
将此 CDN 用于数据表,它将完美运行
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.