堆栈内存溢出
  简体   繁体   English

我的 bootstrap 下拉菜单不起作用，我尽我所能使它起作用

[英]My bootstrap dropdown is not working and I tried everything to make it work as per my knowledge

 原文  2022-12-23 18:56:25  4   1    javascript/ html/ jquery/ css/ bootstrap-4

问题描述

For some reason, my dropdown menu is not working.出于某种原因，我的下拉菜单不起作用。 I have already added all bootstrap CDN and files that I've found, also the jquery script is coming first, but nothing happens, I click over and over and the button doesn't work.我已经添加了我找到的所有引导程序 CDN 和文件，jquery 脚本也最先出现，但没有任何反应，我一遍又一遍地点击按钮不起作用。 It's an exceptional case where a table is being handled by Javascript, I don't know if this is the problem and I'm not catching it.这是一个例外情况，表由 Javascript 处理，我不知道这是否是问题所在，我没有发现它。 Please, I would like to ask for some help here to make my dropdown works, thank you!拜托，我想在这里寻求一些帮助以使我的下拉菜单正常工作，谢谢！

HTML 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">&times;</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 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)
})

此表是使用 JavaScript 创建的

错误

1 个解决方案

解决方案1
 0  2023-01-10 12:31:18

Use this CDN for Datatable it will work perfect将此 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.

相关问题 我的下拉菜单无法使用 bootstrap - My dropdown is not working using bootstrap 为什么我的 bootstrap 下拉按钮不起作用？ - Why is my bootstrap dropdown button not working? 我的小屏幕引导导航下拉列表不起作用 - My bootstrap nav dropdown for small screens is not working 为什么我不能让我的下拉菜单在我的bootstrap导航中工作？ - Why can't I get my dropdown menu to work in my bootstrap nav? 我尝试向其中添加Bootstrap下拉按钮， <a>但下拉菜单无法正常工作。</a> <a>我该怎么做呢？</a> - I tried to add a Bootstrap dropdown button to <a> but the dropdown menu wont work. How do I do this? 我的切换器不工作。 我试过将 js cdn 放在顶部和底部，但没有用 - My toggler is not working. I have tried placing js cdn in top and bottom both but didn't work 为什么不能以短代码将Web Clip图标添加到我的Web应用程序中。 我已经尝试了一切？ - Why can't I add a web clip icon to my webapp in dashcode. I've tried everything? 我试图用 fetch 更新我的 ejs 页面，但它不起作用 - i tried to upate my ejs page with fetch but it doesn't work 我尝试使用 .map function 但它对我的代码不起作用 - I tried to use the .map function but it didn't work on my code 我已经尝试过，但是我的程序似乎不起作用 - I have tried but my program doesn't seem to work
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM