javascript - Bootstrap 多选下拉菜单在 Apps 脚本中被部分 Html 视图隐藏
问题描述
我已经使用链接到 Google 电子表格的 Apps 脚本完成了一个表单,我有一个主 Html 页面和一些在主页内加载的部分 Html 页面“例如添加客户”。我想使用 Bootstrap Multi Select Dropdown,我已经添加了代码,但是多选按钮消失了,我认为问题在于在加载部分 Html 页面时读取 Bootstrap 标签。但是,我对解决方案一无所知。
代码.js
function doGet() {
const htmlServ=HtmlService.createTemplateFromFile("main").evaluate();
return htmlServ; }
loadPartials.js
function loadAddCustomersView(){
const htmlServ=HtmlService.createTemplateFromFile("addcustomer");
return htmlServ.evaluate().getContent();
}
main.html "简要"
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<!--Font Links -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Aref+Ruqaa&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<style>
.nav-link{
cursor:pointer;
}
ul.nav a:hover, ul.nav a:focus, ul.nav a.active {
cursor:pointer;
background-color: #ABB2B9;
color:#ffffff!important;
font-weight: bold;
}
#loading{
position: fixed;
top:0;
left:0;
z-index:10000;
width:100vw;
height:100vh;
background-color: rgba(255,255,255,0.9);
}
</style>
</head>
<body>
<nav id="navigation" class="mb-3 mt-3 pb-3" DIR="RTL">
<header class="bg-white fixed-top bd-header py-2 d-flex align-items-stretch">
<div class="container">
<ul class="nav nav-pills main-nav">
<h1 DIR="RTL" class="d-flex align-items-center fs-4 mb-0 mx-4">Sales</h1>
<li class="nav-item">
<a href="#" class="nav-link active text-body" id="add-customer-link">Add Customer</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-body" id="search-link">Search</a>
</li>
</div>
</header>
</nav>
<div class="container">
<div id="app"></div>
<!-- Content here -->
</div>
<div id="loading" class="d-flex justify-content-center align-items-center invisible">
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden"></span>
</div>
</div>
<script>
var data;
function loadView(options){
var id= typeof options.id === "undefined" ? "app" : options.id;
var cb= typeof options.callback === "undefined" ? function(){} : options.callback;
loadingStart(); //Start loading
google.script.run.withSuccessHandler(function(html){
document.getElementById(id).innerHTML=html;
loadingEnd(); //End loading
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function loadAddCustomerView(){
loadView({func: "loadAddCustomersView"});
}
function activeTabChange(e){
var navLinks = document.querySelectorAll(".main-nav .nav-link");
navLinks.forEach(function(linkEl){
linkEl.classList.remove("active");
//linkEl.css("color","red");
});
e.target.classList.add("active");
}
document.getElementById("add-customer-link").addEventListener("click",loadAddCustomerView);
function navClickEventHandler(e){
if(e.target.matches(".nav-link")){
activeTabChange(e);
}
}
document.getElementById("navigation").addEventListener("click",navClickEventHandler);
document.addEventListener("DOMContentLoaded",loadAddCustomerView);
</script>
</body>
</html>
addcustomer “具有多选下拉菜单的部分页面”
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<body>
<h4 class="border-bottom pb-3 mt-3" >Add Customer
<div class="container">
<div class="add-customer-form" >
<div id="userform" >
<div class="row gx-5 mt-3">
<div class="form-group col">
<label for="Customer-ID" class="form-label">Customer ID</label>
<input type="text" class="form-control" id="Customer-ID" required>
</div>
<div class="form-group col">
<label for="Customer-Name" class="form-label">Customer Name</label>
<input type="text" class="form-control" id="Customer-Name" required>
</div>
<div class="container mt-5">
<div class="dropdown bootstrap-select show-tick">
<label for="Customer-Name" class="form-label">Customer Type</label>
<select class="selectpicker" multiple="" aria-label="Default select example" data-live-search="true" tabindex="null">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
</div>
<button class="btn btn-dark mt-3" id="add-customer-button">Save</button>
</div>
</div>
</body>
</html>
请问有什么帮助吗?
解决方案
推荐阅读
- python - 在 While 循环中从 Pandas 数据框中查找特定的数据行
- c# - 统一的 A* 算法无法部署更多单元
- java - 如何计算不同阈值的真阳性率 (TPR) 和假阳性率 (FPR) 以生成分类模型的 ROC
- batch-file - 在文件中查找包含重复数据的行
- haskell - Haskell:递归数据类型(参数化类型)
- c - 通过 C 中的不同函数传递时,我的变量没有正确分配
- sql - 用于计算每月预算的 SQL 查询
- ios - Swift 中出现键盘时移动按钮和视图
- vb.net - 在 KeyPress 事件上捕获 [Tab] 或 [Enter]
- android - 如何使用 Dialogflow 将用户的聊天机器人输入保存到 Firebase(Android Studio)